在上一篇文章中《利用CSS sprites制作隨著鼠標移動的動畫背景》我們是用mousemove事件來實現我們的鼠標坐標定位判斷的。mousemove這個鼠標函數，常常會用到我們的項目中，是個很好用的函數。根據在上一篇文章制作實例的時候遇到的一些問題，作個總結出來，一來分享給大家，二來可以給自己加深印象。相信熟悉javascript的朋友對鼠標坐標函數比較了解的，網上的資料也很多，就不多說了。先看看一段代碼：

jQuery(document).ready(function(){
   $('#demos').mousemove(function(e){
	   var relX = e.pageX - this.offsetLeft
	   var relY = e.pageY - this.offsetTop
       $('#demos').html(relX + '， ' + relY);

   });

這段代碼表示的是，鼠標在#demos對象中的相對坐標值，也就是以這個對象為基準（范圍），計算鼠標在對象內（對象的左上方的頂角坐標為：0，0）的坐標值。我們繼續看看具體的代碼含義，e.pageX、e.pageY這兩個表示了鼠標在頁面上的位置；offsetLeftoffsetTop分別表示的是返回對象相對于父級對象的布局或坐標的left值和top值。明白了這幾個代碼含義，上面的示例代碼最終輸出值也不難理解。

在這里附上一張關于盒模型的各種計算值含義詳解圖：

層級元素含有position屬性

在這里我們要重點說下offsetLeft的計算方法，上面也說到是對象相對于父級對象的布局或坐標的left值，那么父級對象將是影響最終值的關鍵。一般情況下，都沒什么問題，但如果父級對象出現了position屬性，并且定義了margin值，那么計算結果將會不如我們所意。這是個特殊情況，在這時我們需要適當的修改上面的示例代碼，具體如下：

jQuery(document).ready(function(){
   $('#demos').mousemove(function(e){
	   var parentOffset = $(this).parent().offset(); 
	   var relX = e.pageX - parentOffset.left;
	   var relY = e.pageY - parentOffset.top;
       $('#demos').html(relX + '， ' + relY);

   }); 
})

總結到此結束，解決方案折騰了好久……好好學習，天天向上。Good luck！