鼠标移动——div方块跟随鼠标移动而移动

var oDiv = document.getElementById('div1');
document.onmousemove = function(ev) {
    var ev = ev || event;  //事件的浏览器兼容
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  //滚动条滚动的距离浏览器兼容
    oDiv.style.left = ev.clientX + 'px';  //div左侧的距离为鼠标移动事件的鼠标距离窗口可视区左侧的距离
    oDiv.style.top = ev.clientY + scrollTop + 'px'; //div距离页面顶部的距离等于鼠标移动事件的鼠标距离窗口可视区顶部的距离加上滚动条滚动的距离
}
<body style="height: 2000px;">
    <div id="div1"></div>
</body>

 

posted @ 2017-04-14 13:27  念念念不忘  阅读(584)  评论(0)    收藏  举报