JavaScript练习（一）——跟随鼠标移动_每滚动一下鼠标,元素top值加100px-CSDN博客

本文链接：https://blog.csdn.net/weixin_45927758/article/details/108371572

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box1 {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            /**
        开启绝对定位
        */
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            var div1 = document.getElementById("box1");
            //注意这里不能只绑定给颜色块，需要给整个DOM绑定，否则可能无法向上移动
            document.onmousemove = function (event) {
                event=event||window.event
                //clientX和clientY是相对于整个页面的坐标
                //pageX和pageY是相对于可见页面的坐标
                //一般这种区别在于有滚动条时，可保持鼠标和滑块的相对位置不变
                var left = event.clientX;
                var top = event.clientY;
                div1.style.left = left + "px";
                div1.style.top = top + "px";


                //由于需要处理兼容性问题
                //我们要获取滚动条的距离，横向纵向
                //chrome认为浏览器是body的，用body.scrollTop获取
                //火狐等浏览器认为是html的
                /*var left = event.clientX;
                var top = event.clientY;
                var st =document.body.scrollTop||document.documentElement.scrollTop;
                var sl=document.body.scrollLeft||document.documentElement.scrollLeft;
                div1.style.left = left + st+"px";
                div1.style.top = top +sl +"px";*/

            }
        }
    </script>
</head>

<body style="height: 1000px;">
    <div id="box1"></div>
</body>

</html>

该练习可以让一个对象跟随鼠标的移动而移动。

主要的问题：

1.给需要移动的标签对象添加绝对定位，否则不会移动

2.给整个窗口绑定鼠标移动事件，否则只能在标签块中获取移动事件

3.处理兼容性问题，获取参数时和获取坐标时需要处理兼容性，处理坐标时的兼容性需要获取滚动条移动的距离

4.处理滚动条移动时获取坐标的原点问题，page获取的是当前可见页面的坐标，而client获取的整个网页的坐标系坐标