JavaScript，如何让一个div盒子随着鼠标移动

脚踏实地，坚持不懈!

已于 2022-08-20 15:41:17 修改

阅读量2.6k

点赞数 3

文章标签： javascript 前端 html

于 2022-08-20 13:28:45 首次发布

本文链接：https://blog.csdn.net/weixin_43228946/article/details/126437582

版权

我们现在考虑一下如何使用一个div盒子随着鼠标的移动而移动。下面一段代码，我们开看一下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hell0</title>
    <style>
        body {
            height: 1000px;
            width: 2000px;
        }

        #box1 {
            background-color: yellow;
            width: 99px;
            height: 99px;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            var box1 = document.getElementById("box1");
            document.onmousemove = function (event) {
                event = event || window.event;
                var st1 = document.body.scrollTop;
                var st2 = document.documentElement.scrollTop;
                var st = st1 || st2;
                var sl1 = document.body.scrollLeft;
                var sl2 = document.documentElement.scrollLeft;
                var sl = sl1 || sl2;
                var left = event.clientX;
                var top = event.clientY;
                box1.style.left = left + sl + "px";
                box1.style.top = top + st + "px";
            }
        };
    </script>
</head>

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

</html>

在这里插入图片描述

在这里插入图片描述
在这里，这段代码主要实现的功能是将里面的那个黄色的div随着鼠标的移动而移动。刚开始黄色的div是在左上角的地方，但是随着鼠标的移动到中间的位置。现在我们主要看一下JS代码。
首先获取一个div的对象，var box1 = document.getElementById(“box1”);，之后我们就要给div添加点鼠标滑动的事件document.onmousemove = function (event)。
我们接着获取鼠标的坐标，通过event。(event = event || window.event;var left = event.clientX;var top = event.clientY;).如果我们要顺利实现鼠标可以左右上下随意移动，就要获取浏览器的滚动条scrollLeft属性（返回元素左边缘与视图之间的距离）和scrollTop（
返回元素上边缘与视图之间的距离。）得到滚动条滚动的距离。如果没有个浏览器的滚动条滚动的距离的话，我们的鼠标位置就不能一直位于方块的左上角的那个点上。窗口的大小和实际的页面大小不一致，实际上实际页面的高度和宽度都大于实际窗口的高度和宽度。而div是相对于页面的，其零点(0,0)也是也是相对于实际页面，也就是页面的左上角的点，而鼠标就是相对于浏览器窗口，零点(0,0)是在浏览器窗口的左上角的点。我们现在要做的就是要将页面的零点也就是div的零点对应上，代码实现如下：

var st1 = document.body.scrollTop;
var st2 = document.documentElement.scrollTop;
var st = st1 || st2;
var sl1 = document.body.scrollLeft;
var sl2 = document.documentElement.scrollLeft;
var sl = sl1 || sl2;
var left = event.clientX;
var top = event.clientY;
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";

在这里插入图片描述

脚踏实地，坚持不懈!

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaScript，如何让一个div盒子随着鼠标移动

在这里，这段代码主要实现的功能是将里面的那个黄色的div随着鼠标的移动而移动。刚开始黄色的div是在左上角的地方，但是随着鼠标的移动到中间的位置。现在我们主要看一下JS代码。首先获取一个div的对象，var box1 = document.getElementById("box1");，之后我们就要给div添加点鼠标滑动的事件document.onmousemove = function (event)。我们接着获取鼠标的坐标，通过event。(event = even
复制链接

扫一扫