div跟随鼠标移动练习

最新推荐文章于 2024-06-19 11:15:21 发布

周白卿

最新推荐文章于 2024-06-19 11:15:21 发布

阅读量576

点赞数

分类专栏： JavaScript学习笔记

本文链接：https://blog.csdn.net/qq_51088023/article/details/125897249

版权

css html javascript

JavaScript学习笔记专栏收录该内容

60 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0%;
            padding: 0%;
        }
        body{
            width: 2000px;
            height: 3000px;
        }
        #box1{
            border: 1px solid black;
            width: 50px;
            height: 50px;
            background-color: red;
            /* 开启box1的绝对定位 */
            position: absolute;
        }
    </style>
    <script>
        window.onload = function(){
            /*---------------------使div可以跟随鼠标移动-------------------*/
            //获取div
            var box1 = document.getElementById("box1");
            //给文档绑定鼠标移动事件
            //因为给div绑定事件时，当鼠标移除div的时候将不会触发事件
            //而鼠标无法移出文档页面
            document.onmousemove = function(event){
                //解决事件对象兼容问题
                event = event||window.event
                //获取鼠标的坐标
                /*
                 * div的偏移量是相对于整个页面的
                 * client用于获取当前可见的窗口的坐标
                 * 当窗口更大，出现滚动条时，鼠标将脱离div
                 *    var left = event.clientX;
                 *    var top = event.clientY;
                 */
                /*
                 * pageX和pageY可以获取鼠标相对于当前页面的坐标
                 * 但是这两个属性在IE8中不支持，所以如果需要兼容IE8则不要使用 
                 *   var left = event.pageX;
                 *   var top = event.pageY;
                 */
                //通过获取滚动条滚动的距离
                //与可见窗口的坐标相加来解决兼容问题和鼠标脱离问题
                //chrome认为浏览器的滚动条是body的，可以通过 document.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的偏移量
                box1.style.left = left+sl+"px";
                box1.style.top = top+st+"px";
            };
        };
    </script>
</head>

<body>
    <div id="box1"></div>
</body>

</html>