美文网首页
鼠标跟随事件

鼠标跟随事件

作者: Luyc_Han | 来源:发表于2017-10-25 16:23 被阅读6次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <script type="text/javascript">

    document.onmousemove = function (ev) {

      /// 为了兼容浏览器
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop


      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

      var oeven = ev || event

      var div = document.getElementById('div-style')

      div.style.left = oeven.clientX + scrollLeft + 'px'

      div.style.top = oeven.clientY + scrollTop + 'px'
    }


  </script>

</head>
<body style="height: 2000px; width: 3000px;">

<div id="div-style" style="width: 100px;height: 100px;background-color: #4eeda8; position: absolute">


</div>

</body>
</html>

相关文章

网友评论

      本文标题:鼠标跟随事件

      本文链接:https://www.haomeiwen.com/subject/ddgqpxtx.html