当前位置:首页 > 开发 > Web前端 > DOM > 正文

javascript/dom:固定居中效果

发表于: 2013-04-14   作者:dcj3sjt126com   来源:转载   浏览:
摘要: <!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&
<!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>

 

javascript/dom:固定居中效果

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
让div1在div2中居中显示,假设div1的宽度为100px;height:100px; 1 .div2{position:relative;} 2 .div
模仿大众点评网的团购页面,整体布局滑动到顶端时,信息描述的view停止在顶端,其他布局仍可滑动。
对于B/S开发,客户端与服务器端的交互是非常必要的,JavaScript的提出解决了很多问题,AJAX的提出也
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T
第一种方法: 如何使整个页面内容居中,如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题
一、Node DOM模型定义了Node接口,在DOM中的每个节点都是一个Node(即实现了Node接口),每个Node都
javascript操作DOM w3c把文档表示为树。我们先从dom的继承来说起: 当浏览器解析完文档后,每个节点
DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口)
大家在做相册列表的时候可能会遇到这样的情况,用户上传的图片大小不一,长宽不一,然而需求的列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号