跟随鼠标移动的div 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
    </body>
    <script>
        window.onload=function(){
            
            //onmousemove:当鼠标在一个元素上面移动的时候触发
            //触发频率不是像素，而是间隔时间，在一个指定时间内（很短），如果鼠标的位置
            //和上一次的位置发生了变化，那么就会触发一次。
            var i=0;
            var oDiv=document.getElementById("div1");
            document.onmousemove=function(){
//                document.title=i++;
                var ev = ev || event;
                var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
                oDiv.style.left=ev.clientX+"px";
                oDiv.style.top=ev.clientY+scrollTop+"px";
            }
        }
    </script>
</html>

 

posted @ 2018-11-28 16:34  webxy  阅读(180)  评论(0)    收藏  举报