javascript/dom:固定居中效果

来源:http://www.jb51.net/article/30109.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style> 
        body,div{padding:0px;margin:0px;} 
        #gd{width:100px;height:100px;background:#F00;color:#FFF;} 
        </style> 
        <script> 
            window.onload = function()
            { 
                var isIE=!!window.ActiveXObject; 
                var isIE6=isIE&&!window.XMLHttpRequest;
                /*
                 这两句是判断浏览器。这是Aajx里的方法。也很好理解。我在这里就不多说了。大家有兴趣的可以去网上找找了解一下判断各种浏览器。 
                 * */ 
                var t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop; 
                var l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft; 
                /*
                 document.documentElement.clientHeight这个是获取当前浏览器窗口的高度。 
                 document.getElementById("gd").offsetHeight这是获取我们dom元素的实际高度。 
                 document.documentElement.scrollTop这是获取滚动条滚动的高度。 
                 * */
                
                /*
                 距离清楚了的话。现在我们只需要做最后一件事了。就是让滚动条滚动的时候。即时的把这个滚动的高度给加进去。
                 然后把即时的这个t和l值设置到dom的top和left属性中去。这样就能给用户造成个假象。以为这个是固定在那里的。 
                 * */
                if(isIE6)
                { 
                    setInterval(function()
                    { 
                        t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop; 
                        l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft; 
                        document.getElementById("gd").style.position = "absolute";
                        document.getElementById("gd").style.top = t + "px"; 
                        document.getElementById("gd").style.left = l + "px"; 
                        },1) 
                } 
                else
                { 
                    setInterval(function()
                    {
                        t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop; 
                        l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft; 
                        document.getElementById("gd").style.position = "fixed" 
                        document.getElementById("gd").style.top = t + "px"; 
                        document.getElementById("gd").style.left = l + "px";    
                    },1)
                }
                /*
                 这段就是这个作用。if(isIE6)就是当isIE6这个为真时。也就是当是IE6的浏览器的时候。
                 setInterval(...,1)这个是设置个时钟让在IE6的浏览器下每隔1微秒执行一下语句。
                 也就是不断的在更新t和l的值。然后不断的付给DOM元素的top和left属性，1微秒非常快。
                 用户拉滚动条的速度不可能只需要1微秒的时间。所以用户也就不可能看出来什么。
                 以为那个就是固定在那里的。当然你也可以设置一个滚动事件windon.onscroll。也可以
                 。但是我觉得没这种好。大家有兴趣的也可以研究一下（大家别闲我啰嗦，我觉得自己多研究一下东西，比我教大家一大堆东西都有用）。 

                当然如果不是IE6的浏览器都支持fixed属性。就执行这些语句了。 
                document.getElementById("gd").style.position = "fixed"//给dom元素加一个fixed属性 
                document.getElementById("gd").style.top = t + "px";//初始化时给dom元素设置一个居中的t值。 
                document.getElementById("gd").style.left = l + "px";//初始化时给dom元素设置一个居中的l值 

                 * */ 
            } 
        </script> 
<title>固定居中</title> 
</head> 
<body> 
    <div id="gd"> 
        我就在中间随便你们怎么改变窗口大小和高度 
    </div> 
    <div style="height:1200px;"></div> 
</body> 
</html>