div 跟随鼠标移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box{
            background-color: red;
            width: 50px;
            height: 50px;
            position: absolute;
        }
        #loc{
            background-color: gray;
            width: 500px;
            height: 500px;
        }
    </style>

    <script type="text/javascript">
        window.onload = function () {
            var box = document.getElementById("box");
            document.onmousemove = function (event) {
                event = event || window.event;

                event.cancelBubble = true;
            //    获取鼠标的坐标
           /***
            * clientX 和 clientY
            * 用于获取鼠标在当前的可见窗口的坐标
            * div的偏移量，是相对于整个页面的
            *
            * */

                //pageX， pageY
                //可以获取鼠标相对于当前页面的坐标
               //但是这个两个属性在IE8中不支持，所以如果需要兼容IE8,则不要使用
               //  var left = event.pageX;
               //  var top = event.pageY;

               /**
                * 获取滚动条的距离
                *
                * chrome认为浏览器的滚动条是body的，可以通过body，scrollTop来获取
                * 火狐等浏览器认为浏览器的滚动条是html的
                * */

               var  st = document.body.scrollTop || document.documentElement.scrollTop;
               var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
                var left = event.clientX;
                var top = event.clientY;

                //设置 div 的偏移量
                box.style.left = left + sl + "px";
                box.style.top = top + st + "px";
            };
            
            /***事件的冒泡(Bubble)
             * 指的是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
             * 在开发中大部分情况的冒泡都是有用的，如果不希望发生冒泡可以通过事件对象来取消冒泡
            **/
            var loc = document.getElementById("loc");
            loc.onmousemove = function (event) {
                event = event || window.event;
                event.cancelBubble = true;
            }
        }
    </script>

</head>
<body style="height: 1000px; width: 2000px">
    <div id="loc"></div>
    <div id="box"></div>
</body>
</html>
最后编辑于：2019.02.15 10:54:35
div 跟随鼠标移动

推荐阅读更多精彩内容
