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>Document</title>
  <style>
    #box1{
      width: 100px;
      height: 100px;
      background-color: red; 
      position: absolute;
    }
 
  </style>

  <script>

    window.onload = function(){
        /*
        *  使 div 可以跟随鼠标移动
        */
        var box1 = document.getElementById("box1");
        document.onmousemove = function(event){

          // 解决兼容问题
          event = event || window.event;

          // 获取到鼠标的坐标
          /**
           * chrome 认为 浏览器的滚动条是 body 的，可以通过 body.scrollTop 来获取
           * 火狐等浏览器认为 浏览器的滚动条是 html 的
          */
          // var st = document.body.scrollTop;
        //  var st = document.documentElement.scrollTop;

         var st = document.body.scrollTop ||  document.documentElement.scrollTop;
         var sl = document.body.scrollLeft ||  document.documentElement.scrollLeft;
          /**
           *  clientX clientY
           *  用于获取鼠标在当前的可见窗口的坐标
           * 
           * pageX pageY
           *    可以获取鼠标相对于 当前页面的坐标
           *    不支持 ie8 
          */

          // 获取鼠标的坐标
          var left = event.clientX;
          var top = event.clientY;
 
          // var left = event.pageX;
          // var top = event.pageY;
 
          // 设置 div 的偏移量
          box1.style.left = left + sl + 'px';
          box1.style.top = top + st + 'px';
        }
 
    }

  </script>
</head>
<body style="height: 1000px;width: 2000px;">
  
  <div id="box1"></div> 
</body>
</html>
posted @ 2021-05-06 10:43  13522679763-任国强  阅读(36)  评论(0)    收藏  举报