我寫的方法是網上的前輩做出來，我在這說說我自己遇到的問題。html和css程式碼就不貼了，就是4個div做測試用的。

下面是完整程式碼，基本相容各大流行瀏覽器。

function mouse(obj,str,e){
		var x = e.offsetX,  y = -e.offsetY;
		var k = Math.round(-obj.height()/obj.width()*100)/100;  // 斜率  Math.round(*100)/100
		var x0 = Math.round(obj.width()/2*100)/100, 
			y0 = Math.round(-obj.height()/2*100)/100;
		var kx = Math.round((y-y0)/(x-x0)*100)/100; 
		if(isFinite(kx) && kx > k && kx < -k){
			flag = x-x0 > 0 ? 1 : 0;
			guide(flag,obj,str);
		}
		else{
			flag = y-y0 > 0 ? 2 : 3;
			guide(flag,obj,str);
		}
	}

	function guide(x,obj,str){
		var top = 0, left = 0;
		var top1 = 0, left1 = 0;
		if(str == '進'){
			switch(x){
				case 0 : top = 0; left = -200; break;
				case 1 : top = 0; left = 200; break;
				case 2 : top = -200; left = 0; break;
				case 3 : top = 200; left = 0; break;
			}
			top1 = 0;
			left1 = 0;
		}
		else{
			switch(x){
				case 0 : top1 = 0; left1 = -200; break;
				case 1 : top1 = 0; left1 = 200; break;
				case 2 : top1 = -200; left1 = 0; break;
				case 3 : top1 = 200; left1 = 0; break;
			}
			top = 0;
			left = 0;
		}

		// stop() 解決滑鼠運動過快，動畫在事件結束後仍持續執行的問題
		switch(x){
			case 0 : obj.css({top:top+'px',left:left+'px'}).stop().animate({top:top1+'px',left:left1+'px'},"swing").html('滑鼠由左'+str);
					 break;
			case 1 : obj.css({top:top+'px',left:left+'px'}).stop().animate({top:top1+'px',left:left1+'px'},"swing").html('滑鼠由右'+str);
					 break;
			case 2 : obj.css({top:top+'px',left:left+'px'}).stop().animate({top:top1+'px',left:left1+'px'},"swing").html('滑鼠由上'+str);
					 break;
			case 3 : obj.css({top:top+'px',left:left+'px'}).stop().animate({top:top1+'px',left:left1+'px'},"swing").html('滑鼠由下'+str);
					 break;
		}  
	}
 

<pre name="code" class="javascript">	$('.fat').on('mouseenter',function(e){
		var e = window.event || e;
		mouse($(this).find('.son'),'進',e);
	})
	$('.fat').on('mouseleave',function(e){
		var e = window.event || e;
		mouse($(this).find('.son'),'出',e);
	})

現在來說說我遇到的問題，對於事件物件大家都知道，FF和IE的獲取方式略有不同，我們基本採用這種方式

我之前的程式碼是這樣寫得：

我將e放入mouse函式中，自以為可以獲取滑鼠物件，可是在FF下，e is not defiend；

好了，開始一步步排查錯誤：

1.   在FF下獲取事件物件，function必須有引數e，所以從表面來看function mouse（）是沒有問題的，那麼會是傳參順序的問題嗎？

2.   在 js中 函式的引數沒有簽名，也沒有形參與實參一一對應的限制，函式體是通過arguments 物件來訪問引數，在個物件類似於陣列，函式會從0 -- length讀取引數

      （arguments[0]是對一個引數，arguments[1]是第二個引數，以此類推），然會取相對應的引數進行操作。 所以圖中 實參兩個，形參三個，並不會有什麼問題。

 3.   在 mouse 函式中執行  var e = window.event || e;   在FF中卻有e is not defiend 的報錯，但在IE，獵豹下執行並不會出錯，這就證明了js引數並不需要一一對應的關係，

       也說明 e 在mouse中並沒有發揮作用。

 4. 再仔細看程式碼，mouseenter 事件 其實繫結在 function(){} 上，所以 mouse 不能獲取事件物件， 所以應當更改程式碼為文章開頭的程式碼，先獲取 滑鼠物件，再當引數傳入

    mouse 中，方可解決 FF 中的問題。

雖然我的問題說起來比較low ，可以說是有點可笑，但當時確實困擾我時間比較長，我把重點全放在了 事件物件的相容性問題上，並沒有想到事件繫結的作用域的問題。