JavaScript onmousemove事件实现物体随鼠标移动

187 阅读 0 评论 124 点赞

我是靠谱客的博主烂漫衬衫，这篇文章主要介绍JavaScript onmousemove事件实现物体随鼠标移动，现在分享给大家，希望可以做个参考。

JavaScript onmousemove事件实现物体随鼠标移动

- 一、效果
- 二、代码
- 三、一些说明

一、效果

鼠标移动展示

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #myDiv{
      position: absolute; /* 这里绝对与body定位 */
      width: 50px;
      height: 50px;
      background-color: rebeccapurple;
    }
    #main{
      width: 5000px;
      height: 5000px;
    }
  </style>
</head>
<body>
  
  <div id="main">
    <div id="show"></div>
    <div id="myDiv"></div>
  </div>
  
  <script>
    var show = document.getElementById("show");
    var myDiv = document.getElementById("myDiv");
    window.onmousemove = function(event) {
      event = event || window.event;  // 为了兼容不同浏览器
      // let left = event.clientX;  // 获取鼠标偏移量，页面滚动时会出问题
      // let top = event.clientY;
      let left = event.pageX;  // IE8不支持
      let top = event.pageY;
      show.innerHTML = "position: x = " + left + ";  y = " + top;
      myDiv.style.left = left + "px";  // 注意加单位
      myDiv.style.top = top + "px";
    };
  </script>

</body>
</html>