<meta http-equiv="Content-Language" content="zh-cn" /> <title>事件对象-Div跟鼠标移动</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> *{margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑';} .clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-block;} * html .clearfix{height:1%} .clearfix{display:black;} #box{100px;height:100px;background:red;position:absolute;} </style> </head> <body> <div id='box'></div> <script type="text/javascript"> window.onload=function(){ document.onmousemove =function(ev){ var oDiv=document.getElementById('box'); var Event=ev||event; var pos = getPos(Event); oDiv.style.left = pos.x+'px'; oDiv.style.top = pos.y+'px'; } 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+scrollLeft}; }; } </script> </body> </html>
鼠标事件:
clientX 是可视区的横坐标
clientY 是可视区的纵坐标
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
document.documentElement.clinetWidth 可视区的宽
document.documentElement.clinetHeight 可视区的高