盒子跟隨鼠標移動而移動(兼容IE8)

行者花雕 2021-11-03

展開全文

需求

?通過JavaScript使盒子跟隨著鼠標的移動而移動，并且當頁面出現(xiàn)滾動條時，盒子也會跟隨鼠標正常移動（兼容IE8）

在這里插入圖片描述
?

代碼


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>div跟隨鼠標移動</title>
  <style>
      div{
          width: 200px;
          height: 200px;
          background-color: skyblue;
          /*注意此處需要設置盒子的定位方式,否則后面設置盒子的偏移量無效*/
          position: absolute;
      }
      body{
          width: 2000px;
          height: 2000px;
      }
  </style>
  <script>
      window.onload = function () {
          let box = document.getElementById("box");
          let odj = document.documentElement;
          odj.onmousemove = function (event) {
              // 解決IE8對event的兼容性問題
              event = event || window.event;
              // 解決body和documentElement的兼容性問題(谷歌瀏覽器和其他瀏覽器的兼容性)
              var st = document.body.scrollTop || document.documentElement.scrollTop;
              var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
              //設置盒子的水平偏移量注意需要加上單位
              box.style.left = event.clientX + sl + "px";
              //設置盒子的垂直偏移量
              box.style.top = event.clientY + st + "px";
          };
      };
  </script>
</head>
<body>
<div id="box"></div>
</body>
</html>