div跟着鼠标移动

对event事件的运用和兼容性处理，以及出现滚动条的情况，event.clientX和event.clientY分别代表鼠标的横纵坐标。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
}
</style>

</head>
<body style ="height:2000px;">
<div id = "div1"></div>

<script type="text/javascript">
function getPos(ev){
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
    return {x:ev.clientX + scrollLeft,y:ev.clientY + scrollTop};
}
document.onmousemove = function(ev){
    var oEvent = ev||event;
    var oDiv = document.getElementById('div1');
    var pos = getPos(oEvent);

    oDiv.style.left = pos.x + 'px';
    oDiv.style.top = pos.y + 'px';
}
</script>
</body>
</html>

 

posted @ 2017-01-19 16:15  萤子  阅读(101)  评论(0)    收藏  举报