JS小练习之鼠标事件——让物体跟随鼠标移动_js 鼠标移动和物体不在一个位置-CSDN博客

本文链接：https://blog.csdn.net/weixin_41586886/article/details/80691124

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>鼠标事件</title>
    <style>
    #div1{
      width: 100px;
      height: 200px;
      position: absolute;
      background: red;
    }
    </style>
    <script type="text/javascript">
    //实现：鼠标移动到哪里，物体就跟着移动到哪里
    // document.οnmοusemοve=function(ev){
    //   var oEvent=ev||event;
    //   var oDiv=document.getElementById('div1');
    //   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    //
    //   oDiv.style.left=oEvent.clientX+'px';
    //   oDiv.style.top=oEvent.clientY+scrollTop+'px';
    // };

    //将以上获取鼠标位置的方法封装成函数
    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.οnmοusemοve=function(ev){
      var oEvent=ev||event;
      var oDiv=document.getElementById('div1');
      var pos=getPos(oEvent);

      oDiv.style.left=pos.x+'px';
      oDiv.style.top=pos.y+'px';
    };

    </script>
  </head>
  <!-- 在style="height:2000px;"没有加之前，物体能够很好的跟随鼠标移动，并且鼠标贴在物体的左上顶点，
       即使滑动也没关系，加了之后，鼠标滚动就会导致鼠标与物体之间出现距离，出现这个的原因在于：clientX
       clientY都是指可见区域的坐标，在没加style="height:2000px;"之前可见区域与整个页面的区域重合，
       就不会出现问题；解决办法：使用scrollTop来获取当前页面滚动条的纵坐标的位置+clientY就是物体的真正的高了
   -->
  <body style="height:2000px;">
    <div id='div1'></div>

  </body>
</html>