JS 事件基础跟随鼠标移动

来源：互联网发布：淘宝旗舰店和京东自营编辑：程序博客网时间：2024/06/05 14:16

做一个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>

0 0

JS 事件基础 跟随鼠标移动

JS 事件基础跟随鼠标移动