<script>
window.onload = function(){ /* * 使 div 可以跟随鼠标移动 */ var box1 = document.getElementById("box1"); document.onmousemove = function(event){
// 解决兼容问题 event = event || window.event;
// 获取到鼠标的坐标 /** * chrome 认为 浏览器的滚动条是 body 的，可以通过 body.scrollTop 来获取 * 火狐等浏览器认为 浏览器的滚动条是 html 的 */ // var st = document.body.scrollTop; // var st = document.documentElement.scrollTop;
var st = document.body.scrollTop || document.documentElement.scrollTop; var sl = document.body.scrollLeft || document.documentElement.scrollLeft; /** * clientX clientY * 用于获取鼠标在当前的可见窗口的坐标 * * pageX pageY * 可以获取鼠标相对于 当前页面的坐标 * 不支持 ie8 */
// 获取鼠标的坐标 var left = event.clientX; var top = event.clientY; // var left = event.pageX; // var top = event.pageY; // 设置 div 的偏移量 box1.style.left = left + sl + 'px'; box1.style.top = top + st + 'px'; } }
</script> </head> <body style="height: 1000px;width: 2000px;"> <div id="box1"></div> </body> </html>