1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script type="text/javascript"> 8 window.onload=function() 9 { 10 /* 11 div可以跟随鼠标移动 12 */ 13 var box1=document.getElementById("box1"); 14 document.onmousemove=function(event){ 15 event=event||window.event; 16 /* 17 设置div的偏移量 设置偏移量只对开启定位的元素起作用 18 获取到的x y是一个数值 19 clientX,clientY用于获取鼠标在当前可见窗口的坐标 20 div的偏移量是相对于整个页面的 21 22 pageX,pageY可以获取鼠标相对于当前页面的坐标 23 在IE8中不支持，所以如果需要兼容IE8则不使用 24 25 当页面的长度大于窗口的最大长度， 26 chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取 27 火狐等浏览器则认为浏览器的滚动条是HTML的 28 */ 29 //var st=document.body.scrollTop; 30 var st=document.body.scrollTop||document.documentElement.scrollTop; 31 var sl=document.body.scrollLeft||document.documentElement.scrollLeft; 32 //var x=event.pageX; 33 //var y=event.pageY; 34 var x=event.clientX; 35 var y=event.clientY; 36 box1.style.left=x+sl+"px"; 37 box1.style.top=y+st+"px"; 38 }; 39 }; 40 </script> 41 <style type="text/css"> 42 #box1{ 43 width:100px; 44 height:100px; 45 background-color:red; 46 /* 开启box1的定位 */ 47 position:absolute; 48 } 49 </style> 50 <body style="height:1000px 1000px"> 51 <div id="box1"></div> 52 </body> 53 </html>