月度归档：2018年09月

鼠标事件

发表于由
回复

鼠标位置

可视区位置：clientX,clientY

例子1:跟随鼠标的Div

消除滚动条的影响

滚动条的意义–可视区与页面顶部的距离

获取鼠标在页面的绝对位置

封装函数

例子2：一串跟随鼠标的Div

event对象和事件冒泡

发表于由
回复

什么是event对象

用来获取事件的详细信息：鼠标位置、键盘按键

例子：获取鼠标位置：clientX

document的本质：document.childNodes[0].tagName

获取event对象（兼容性写法）

var oEvent=ev||event;

事件流

事件冒泡

：取消冒泡：oEvent.cancelBubble=true

例子：仿select控件

DOM事件流

全局变量的重要性

发表于由
回复 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>scroll</title>
    <style>
        body {
            height: 2000px;
        }

        #div1 {
            height: 100px;
            width: 100px;
            position: absolute;
            right: 0px;
            bottom: 0px;
            background: red;
        }
    </style>
    <script>
        window.onload=function(){

            var oDiv1 = document.getElementById("div1")


            var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop
            //  document.documentElement.scrollTop || document.body.scrollTop

            var divtop = (document.documentElement.clientHeight - oDiv1.offsetHeight)/2 + oScrollTop

            oDiv1.style.top = divtop + 'px'


        }


        window.onscroll = function (e) {
            var e =e || window.event;

            var oDiv1 = document.getElementById("div1")


            var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop
            //  document.documentElement.scrollTop || document.body.scrollTop

            var divtop = (document.documentElement.clientHeight - oDiv1.offsetHeight)/2 + oScrollTop

            move(divtop)
        }
        var timer=null//若不是全局变量会蹦跶！！！！
        function move(position1){
            var object1=document.getElementById("div1")
            clearInterval(timer)
           // alert("object.offset=" + object1.offsetTop + " position=" + position1)
            timer = setInterval(function () {
                                if (object1.offsetTop != position1 ) {
                      var speed = (position1-object1.offsetTop)/2
                      speed = speed>0?Math.ceil(speed):Math.floor(speed)
                                   // alert(speed)
                                    //console.log("object.offset=" + object1.offsetTop + " position=" + position1)
                      object1.style.top=object1.offsetTop+speed+'px'
                  }
                  else
                      {
                                    clearInterval(timer)

                                }
            }, 30)
        }

    </script>
</head>

<body>
<input type="text" id="dp">
<div id="div1"></div>
</body>
</html>