js：网页中的高和宽（document）

一，此例中通过鼠标点击事件在网页的中心位置创建一个盒子，不管浏览器变小，或是有卷曲的网页，盒子都会在浏览器正中央

主要方法：clientWidth方法获取当前可见网页的宽度

                   document. documentElement.clientWidth;

　　　　　获得网页中被卷去的宽高

                  document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft;

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }

    </style>
    <script language="JavaScript">
        function $(oId){
            return document.getElementById(oId);
        }
        function which(){
            //clientWidth方法获取当前可见网页的宽度
            var w=document. documentElement.clientWidth;
            var h=document. documentElement.clientHeight;
            //获得网页中被卷去的宽高
            var sw=document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft;
            var sl=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            //运算得到设置盒子的位置
            var hh=w/2+sw;
            var ss=h/2+sl;
            //创建一个盒子并为其设置属性
            var oDiv=document.createElement("div");
            oDiv.style.width="100px";
            oDiv.style.height="100px";
            oDiv.style.display="block";
            oDiv.style.position="absolute";
            oDiv.style.left=hh+"px";
            oDiv.style.top=ss+"px";
//            oDiv.style.marginLeft=hh+"px";
//            oDiv.style.marginTop=ss+"px";

            oDiv.style.backgroundColor="black";
            //设置盒子位置
            $("container").appendChild(oDiv);

        }
    </script>
</head>
<body>

<div id="container" style="height: 2000px;width: 2000px"  onmousedown="which();">
</div>
</body>
</html>

二，addEventListener添加事件句柄

为网页添加一个盒子可跟随网页的向下滑动保持在网页旁边

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/User3.js"></script>
    <style type="text/css">
        body{
            width: 2000px;
            height: 2000px;
        }
        .box{
            width: 150px;
            height: 200px;
            position: absolute;
            right: 20px;
            border: 1px solid red;
        }
        .aff{
            transition:all 1s;
        }
    </style>
    <script language="JavaScript">
        /* obj.addEventListener(xEvent,fn, true)
         事件冒泡
         例: 当有父子关系的元素，都触发单击事件的时候，会形成事件流，事件流中的
         事件会依顺序逐个触发。
         addEventListener第三个参数说明
         第三个参数是指事件的冒泡触发顺序，false 表示从子元素到父元素依次触发事件。
         true  表示从父元素到子元素依次触发事件。

         * */
        function $(oId){
            return document.getElementById(oId);
        }
         function scrollEvent(obj,xEvent, fn) {
            if(obj.attachEvent){
                //添加事件句柄fn是传入的事件类型
                obj.attachEvent("on"+xEvent,fn);
            }
            if(obj.addEventListener){
                //添加事件句柄fn是传入的事件类型
                obj.addEventListener(xEvent,fn, true);//addEventListener  w3c标准。
            }
        }
        ////DOMMouseScroll  mousewheel
        window.onload = function(){
            dom.addClass( $("oDiv"),"aff");
            var  top=$("oDiv").style.top;
            //类型转换
            top=parseInt(top);
            //调用scrollEvent函数传入想要设置的对象和事件和事件执行完调用的函数
            scrollEvent(document,"scroll",function(){
                //
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                var h=scrollTop+top+"px";
                $("oDiv").style.top=h;
            });
        }

    </script>

</head>
<!--事件冒泡-->
<body >
<div style="top:40px;" class="box" id="oDiv">
</div>
</body>
</html>

 

posted @ 2017-12-21 19:55  dybe  阅读(2031)  评论(0)  编辑  收藏  举报