JS 事件基础跟随鼠标移动

最新推荐文章于 2025-06-14 21:20:02 发布

Lewandowski-y

最新推荐文章于 2025-06-14 21:20:02 发布

阅读量4.7k

点赞数 1

分类专栏： JavaScript学习笔记文章标签： javascript

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

13 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript创建一个div元素，并使其能够随着鼠标的移动而移动。通过监听鼠标移动事件并获取鼠标的位置，结合页面滚动的距离来更新div元素的位置。

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

做一个div跟随鼠标移动
注意事项：但凡利用到clientX和clientY，一定要加scrollTop和scrollLeft，因为clientX和clientY都是网页可视区坐标，没有加被滚动区间的坐标

    <style>
    #div1{
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
    }
    </style>
    <script>
    document.onmousemove=function(ev)
    {
        var oDiv=document.getElementById('div1');
        var oEvent=ev||event;

        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

        oDiv.style.left=oEvent.clientX+scrollLeft+'px';
        oDiv.style.top=oEvent.clientY+scrollTop+'px';
    }
    </script>
 </head>
 <body style="width:2000px; height:2000px">
    <div id="div1"></div>
 </body>
 </html>

可以将获取鼠标坐标封装成一个函数getPos，如下：

    //封装一个函数，用来获取鼠标坐标
    function getPos(ev)
    {
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;  

        return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};     
    }

    document.onmousemove=function(ev)
    {
        var oDiv=document.getElementById('div1');
        var oEvent=ev||event;

        var pos=getPos(oEvent); 

        oDiv.style.left=pos.x+'px';
        oDiv.style.top=pos.y+'px';
    }
    </script>