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

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

   });

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

在這里附上一張關(guān)于盒模型的各種計(jì)算值含義詳解圖：

層級(jí)元素含有position屬性

在這里我們要重點(diǎn)說下offsetLeft的計(jì)算方法，上面也說到是對(duì)象相對(duì)于父級(jí)對(duì)象的布局或坐標(biāo)的left值，那么父級(jí)對(duì)象將是影響最終值的關(guān)鍵。一般情況下，都沒什么問題，但如果父級(jí)對(duì)象出現(xiàn)了position屬性，并且定義了margin值，那么計(jì)算結(jié)果將會(huì)不如我們所意。這是個(gè)特殊情況，在這時(shí)我們需要適當(dāng)?shù)男薷纳厦娴氖纠�代碼，具體如下：

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);

   }); 
})

總結(jié)到此結(jié)束，解決方案折騰了好久……好好學(xué)習(xí)，天天向上。Good luck！