1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #box1{ 8 width: 100px; 9 height: 100px; 10 background-color: red; 11 /* 12 * 開啟box1的絕對定位 13 */ 14 position: absolute; 15 } 16 17 </style> 18 19 <script type="text/javascript"> 20 window.onload = function(){ 21 22 /* 23 * 使div可以跟隨鼠標移動 24 */ 25 26 //獲取box1 27 var box1 = document.getElementById("box1"); 28 //綁定鼠標移動事件 29 document.onmousemove = function(event){ 30 31 //解決兼容問題，ie8 32 event = event || window.event; 33 34 //獲取滾動條滾動的距離 35 /* 36 * chrome認為瀏覽器的滾動條是body的，可以通過body.scrollTop來獲取 37 * 火狐等瀏覽器認為瀏覽器的滾動條是html的， 38 */ 39 var st = document.body.scrollTop || document.documentElement.scrollTop; 40 var sl = document.body.scrollLeft || document.documentElement.scrollLeft; 41 //var st = document.documentElement.scrollTop; 42 43 44 //獲取到鼠標的坐標 45 /* 46 * clientX和clientY 47 * 用於獲取鼠標在當前的可見窗口的坐標 48 * div的偏移量，是相對於整個頁面的, 鼠標和div的左邊不一致，相差的距離是滾動條的距離 49 * 50 * pageX和pageY可以獲取鼠標相對於當前頁面的坐標 51 * 但是這個兩個屬性在IE8中不支持，所以如果需要兼容IE8，則不要使用 52 */ 53 var left = event.clientX; 54 var top = event.clientY; 55 56 //設置div的偏移量 57 box1.style.left = left + sl + "px"; 58 box1.style.top = top + st + "px"; 59 60 }; 61 62 63 }; 64 65 66 </script> 67 </head> 68 <body style="height: 1000px;width: 2000px;"> 69 <div id="box1"></div> 70 </body> 71 </html>
鼠標和div位置不一致
