js基础——div跟随鼠标移动

最新推荐文章于 2024-11-15 22:25:55 发布

jwz934738949

最新推荐文章于 2024-11-15 22:25:55 发布

阅读量246

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/100631045

javascript基础专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何使用JavaScript实现一个div元素跟随鼠标移动的效果。通过监听鼠标移动事件，利用clientX、clientY获取元素在窗口的偏移量，并结合滚动条距离进行定位。适用于网页交互设计，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、clientX、clientY可以获取元素当前窗口的偏移量；

2、pageX、pageY可以获取整个页面的偏移量，无法在IE8浏览器中实现；

3、获取滚动条的距离：

谷歌浏览器认为滚动条是属于body的，而火狐等浏览器认为滚动条是属于html的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div跟随鼠标移动</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #box1 {
            width: 300px;
            height: 300px;
            background-color: blue;
            border: 1px solid #000;
            position: absolute;
        }

    </style>
    <script>
        window.onload = function () {
            var box1 = document.getElementById("box1");
            document.onmousemove = function (event) {
                var box2 = document.body.scrollTop || document.documentElement.scrollTop;
                var box3 = document.body.scrollLeft || document.documentElement.scrollLeft;
                event = event || window.event;
                var x = event.clientX;
                var y = event.clientY;
                box1.style.left = x + box3 + "px";
                box1.style.top = y + box2 + "px";
            }
        }
    </script>
</head>
<body style="width: 1000px;height: 800px;">
<div id="box1"></div>
</body>
</html>