[求教cloudgamer]关于居中问题

Question

上一贴经您的指导.已经完工了.紧接着我做了一个LightBox的效果..基本快完工了.
但参考你的帖子的时候发现你有个更和谐的居中方法:
就是先设置top left为50% 然后负向移动offsetWidth/2.这样给我的最直观效果就是省去了onresize的居中判断了
但看你的代码我有点不懂就是
  //兼容ie6的居中定位程序
  SetCenter: function(){
this.Box.style.marginTop = document.documentElement.scrollTop - this.Box.offsetHeight / 2 + "px";
this.Box.style.marginLeft = document.documentElement.scrollLeft - this.Box.offsetWidth / 2 + "px";
  },
  //显示
  Show: function(options) {
//固定定位
this.Box.style.position = this.Fixed && !isIE6 ? "fixed" : "absolute"; //覆盖层
this.Over && this.OverLay.Show();

this.Box.style.display = "block";

//居中
if(this.Center){
this.Box.style.top = this.Box.style.left = "50%";
//设置margin
if(this.Fixed){
this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px";
this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + "px";
}else{
this.SetCenter();
}
}你为什么要判断isFixed如果是false的话 用this.SetCenter 用上面那个不是可以居中么?
//希望你能给我讲解下 如果那么用在什么情况下有BUG 或者别的原因 那样我就又学了一招.ps:CSDN给的分太少了...别介意

Answer 1

Center先判断是否居中
Fixed再判断是否定位居中还是不定位的居中

Answer 2

嗯 这个是... 但我想不明白 定位居中和非定位居中 有什么区别 不都是居中么? 
document.document.scrollTop 页面刚开始 不都是0么 直接用 -margin也是居中的..而且看楼主是修正IE6下的....我一直没搞清楚... 

Answer 3

那些术语我明白.但你那个写的是 修正IE6下的居中效果.但我在IE6下把你的代码改为
if(this.Center){
this.Box.style.top = this.Box.style.left = "50%";
//设置margin
this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px";
this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + "px";
}
我也不区分isFixed 我在IE6下看 也没什么区别呀...

Answer 4

哦...还是没太理解等我再消化消化吧
    if(this.Center){
        this.Box.style.top = this.Box.style.left = "50%";
        //设置margin
        this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px";
        this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + "px";
    }
// 这个代码是我给你改后的..不是你原本的
我意思说这样改后 我在IE6下 没发现跟你那原版的有啥区别,,,我再瞅瞅吧,.

Answer 5

晕 看了半下午 还是没搞懂..
cloudgamer兄:
你的代码:
//居中
if(this.Center){
this.Box.style.top = this.Box.style.left = "50%";
//设置margin
if(this.Fixed){
this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px";
this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + "px";
}else{
this.SetCenter();
}
}
我的代码:
if(this.Center){
this.Box.style.top = this.Box.style.left = "50%";
this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px";
this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + "px";
}
// 你能告诉我 在IE6下 怎么操作或者什么情况下 我代码的效果跟你那个会有区别么?

Answer 6

估计你测试的时候document.documentElement.scrollTop是0
所以就一样咯
你试试滚动一下再试