美文网首页
鼠标跟随事件

鼠标跟随事件

作者: 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