一開始我是這么想的，將待移入的元素分割四塊，用mousemove獲取第一次鼠標落入的區域來判斷鼠標是從哪個方向進去的。
所以只要寫個算法來判斷鼠標的值落入該元素的區域就可以得出鼠標移入的方向，如下圖：
對於數學不太好的我，只能上網找下看有沒有人解決了。找到了如下這段：
var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
當時就驚呆了，初看不知道什么意思，重新梳理下，發現這段代碼跟我的思路是一樣的。
那就讓我來一步一步解釋這段代碼吧！
1)、將判斷區域問題轉成判斷角度。
2）、x和y的計算：
該元素的坐標原點是(offsetLeft, offsetTop),那么要轉成判斷角度，必須將原點拉到該元素的中點上。則中點的坐標是Oz( offsetLeft + w/2, offsetTop + h/2 );
那么鼠標落入的點M(e.pageX,e.pageY);
如果要將這個點轉成以Oz為中心，那么就得換算成 x點：e.pageX - (offsetLeft + w/2) ； y點：e.pageY - (offsetTop + h/2)。
那么x和y就出來了。 (w > h ? (h / w) : 1)和 (h > w ? (w / h) : 1)這兩個請先忽略，后面會解釋。
3）、Math.atan2(x,y)函數：
這個函數返回的值相當於這個點的角度，當然貌似這些編程語言里返回的基本都是弧度。而這代碼是用角度來算的所以避免不了弧度和角度的轉換，
公式：弧度=角度乘以π后再除以180，
角度=弧度除以π再乘以180
(Math.atan2(y, x) * (180 / Math.PI) 其實等於這個 (Math.atan2(y, x) / ( Math.PI/ 180)
4）、核心部分，
Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
- +180 ：從第三步我們可以得到角度了，但為什么還要加個180，原因是原來的坐標軸是(-180,180)度的，加個180那么就都成正的，即(0,360)，這個不難理解。
- /90 ：那為什么要除於90呢，要知道90，就必須理解 (w > h ? (h / w) : 1)和 (h > w ? (w / h) : 1) 這段代碼的意思將矩形矯正成正方形（特殊矩形的矩形是正方形所以也就有了這種判斷，其實判不判段都一樣）。如果我們的元素是個正方形的話，那兩條對角線相交的那些角就都是90度了（下圖,圖中標明的那個角）。
- +3 的意思，只要知道我們角度區間是從右上方開始算起的，然后順時針計算的就可以了。該作者想要將結果顯示的順序是 上右下左，所以加三就是將第一區間變成上。
- Math.round() ,四舍五入，那么問題來，我們的X軸和Y軸可不是斜着的呀（如圖）
，那這樣角度計算不就成問題了。所以就由Math.round()函數發揮作用了，比如計算下0-90中任何一個數除於除於90，我們可以得到 0~1之間的數，如果加個四舍五入呢？那么結果就只有0和1了，剛好45度角是我們分割線。（只能說寫出這個代碼的人牛） - %4取余，保證結果是0、1、2、3 之間的一個（分別代表上、右、下、左）。
這個是我的仿百度新聞傳媒動畫案例，當然比它實現更好些，就是加入了上面的判斷，哈哈。 js庫是jquery。
http://yunpan.cn/cjz5aBh3rck9e （提取碼：ddc0）