由於本人是菜鳥對javascrit理解不深入，如果疏漏請大家多多包涵多多題型。近來看到網頁上的地圖上有個東西跟着鼠標動，上面顯示着X和Y的坐標，通過學習和理解終於自己完成了一個。遺憾的是FF上不兼容，但是還是拿出來請大家多多評論指正。下面請看代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title>無標題頁</title> 5 <script type="text/javascript"> 6 function load(){ 7 8 var xPoint=window.event.clientX; 9 var yPoint=window.event.clientY; 10 div2.innerHTML="X="+xPoint+",Y="+yPoint; 11 div2.style.marginLeft=xPoint+"px"; 12 div2.style.marginTop=yPoint+"px"; 13 div1.onmousemove=dOnmousemove; 14 } 15 function dOnmousemove(){ 16 var div=document.getElementById("div1"); 17 var xPoint=window.event.clientX; 18 var yPoint=window.event.clientY; 19 div2.innerHTML="X="+xPoint+",Y="+yPoint; 20 div2.style.marginLeft=xPoint+"px"; 21 div2.style.marginTop=yPoint+"px"; 22 23 24 } 25 document.onmousemove=load; 26 27 28 </script> 29 </head> 30 <body onload="load()"style="background-color:Red"> 31 <div id="div1" style="width:100%;height:100%" > 32 <div id="div2" style=" background-color:Yellow; width:100px;height:20px;">ddd</div> 33 </div> 34 35 36 </body> 37 </html>
思路：
1.確認跟隨鼠標的是一個div。
在javascript中在在頁面上彈出的大部分都是一個層而不是單獨的頁面。所以首先定義一個跟隨鼠標的層div2。
2.獲取X坐標和Y坐標。
由於是跟隨鼠標所以必須獲取鼠標移動時X的坐標和Y的坐標，所以使用window.event.clientX和window.event.clientY來獲取。
3.讓X坐標和Y坐標顯示在div中。
要讓div中顯示X的坐標和Y的坐標使用div2.innerHTML="X="+xPoint+",Y="+yPoint;
4.控制div跟隨鼠標時的位置。
要控制div跟隨鼠標就必須控制div的位置，所以使用div2.style.marginLeft=xPoint+"px";div2.style.marginTop=yPoint+"px";分別將X的坐標和Y的坐標值賦給div2的marginLeft和marginTop。
5.定義onmousemove事件。
onmousemove事件是指在鼠標移動時所觸發的事件，使用div1.onmousemove=dOnmousemove；此時的dOnmousemove函數是onmousemove事件的響應函數。
6.監聽onmousemove事件。
在最后必須監聽onmousemove事件，因為div1層中除了跟隨鼠標的div2后沒有任何的內容。鼠標的onclick、onload等響應事件，當文檔中沒有內容時是不會有效果的，所以必須監聽。