本文要介紹的是一種鼠標從一個元素移入移出時，獲取鼠標移動方向的思路。這個方法可以幫助你判斷鼠標在移入移出時，是從上下左右的哪個方向發生的。這個思路，是我自己琢磨出來，利用了一點曾經高中學過的數學知識，但是非常簡單好理解，希望能對你有所幫助。
在線demo：
http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html
相關代碼：
https://github.com/liuyunzhuge/blog/blob/master/mouse_direction/demo1.js
另外demo1.html里面還有部分邏輯代碼。
效果演示：
思路詳解
1. 把元素框分成如下四部分：
只要能判斷出鼠標移入移出時屬於哪個部分的范圍內，問題即可解決。而這個判斷可通過斜率，結合鼠標的位置與元素框中心點的位置比較得出。這個判斷原理，采用下面的坐標系圖解來說明。
2. 解決這個問題，建立如下圖坐標系：
1）上圖以瀏覽器可視區域左上角為原點建立坐標系，坐標系與數學坐標系方向一致，往右表示x軸正方向，往下表示y軸負方向；
2）圖中點(x1,y1)代表元素框左上角，(x4,y4)代表元素框右下角，(x0,y0)代表元素框的中心點，（x,y）表示鼠標移入移出時與元素框的邊的交點；
3）根據下面的公式：
可得(x1,y1)與（x4,y4)這條對角線的斜率為 k = (y1-y4)/(x1-x4)。由於對稱性，元素框另外一條對角線的斜率一定是 -k。
同時由於(x1,y1)與（x4,y4)這條對角線在坐標系中一定經過的是第二和第四象限，所以k肯定是負值，而 -k一定是正值。
4）根據同樣的公式，當鼠標移入移出時的瞬間，與元素邊框的交點與元素框中心點的斜率 k1 = (y-y0)/(x-x0)。
5）由圖可知，當 k < k1 < –k時，鼠標一定是從元素的左右方向移動的；反之，一定是從上下方向移動的。
當鼠標是從左右方向移動時，如果x > x0，那么鼠標就是從右邊移動的，反之就是從左邊移動的；
當鼠標是從上下方向移動時，如果y > y0時，那么鼠標就是從上邊移動的，反之就是從下邊移動的。
注意：坐標系中所有的y值都是負的。
以上便是這個問題，我提供的解決思路，通過上面的圖解說明，相信大家理解起來會比較容易。如果查看我提供的代碼實現demo1.js，會發現代碼的邏輯，跟上面的圖解說明也是一致的。當然這個思路只是解決如何判斷鼠標移入移出的方向問題，demo中的效果實現最后還得要借助css 過渡才行，不過這個部分就更簡單了，詳細代碼可見demo1.html的源碼，邏輯非常簡單，這里就不再詳細說明了。
其它思路
在得出上面的思路之前，我其實已經在網上了解到另外一個思路實現了，我把該實現也做了一個demo：
http://liuyunzhuge.github.io/blog/mouse_direction/demo2.html
代碼：
https://github.com/liuyunzhuge/blog/blob/master/mouse_direction/demo2.js
當然這兩個demo，從效果上沒有任何區別，它們的區別僅僅在於鼠標移動方向判斷的算法不同而已。這個算法可以在demo2.js中找到，你也可以通過下面的兩篇文章了解到它的一些介紹：
http://www.w3cfuns.com/notes/13989/90cb3c048f6516f8a13a87b5e474a15e:storey-1
http://sentsin.com/web/112.html
不過慚愧的是，我並沒有看懂這個思路的原理，所以我這里也給不出解釋說明了，雖然在別的地方看到了一些解釋，但是並不是很清晰，所以我才去想有沒有更簡單理解的方法實現。實際工作中，我認為這兩種思路都是可以使用的，用哪個憑自己喜好決定就行了。
總結
最后希望本文提供的這個小東西在你平常工作的時候，能夠派上用場，為你的頁面添加一些活潑的滑入滑出效果等等，同時也算是自己的一個積累。