判断鼠标移入移出元素时的方向

本文要介绍的是一种鼠标从一个元素移入移出时，获取鼠标移动方向的思路。这个方法可以帮助你判断鼠标在移入移出时，是从上下左右的哪个方向发生的。这个思路，是我自己琢磨出来，利用了一点曾经高中学过的数学知识，但是非常简单好理解，希望能对你有所帮助。

在线demo：

http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html

另外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的源码，逻辑非常简单，这里就不再详细说明了。