判断鼠标进出方向

判断鼠标进出方向，是一个很有意思的效果；当我们知道原理时，用 javascript 实现起来，非常简单。

在 dom 世界中，页面上的块级元素，一般情况下会被渲染成矩形。我们划个对角线，也就将它分割为四小块（如下图）。

给 dom 元素添加 mouseover 和 mouseout 事件时，能在事件对象 event 中拿到鼠标的 pageX 与 pageY 的坐标值，只需要判断该点处于四小块的哪一个，就能判定它的方向。

一个更简便的判断指标是，角度。根据矩形的宽高比，可以确定对角线的夹角的四个角度区间。鼠标在矩形上的进出点，与矩形的两条对角线的交点的连线，和 x 轴构成了一个角度。检测这个角度在哪个区间中，也能判断鼠标进出方向。

设矩形宽高为 width 和 height。

左边区域角度的一半，可以由反正弦函数求得：atan = [Math.atan(height / 2,  width / 2) / Math.PI * 180];

左边区域的角度为： [360 -  atan] 到 [atan]

上边区域的角度为：  [atan] 到 [180 - atan]

右边区域的角度为： [180 - atan] 到 [180 + atan]

下边区域的角度为： [180 + atan] 到 [360 - atan]

dom 矩形的对角线交点 Q，距离文档左上角的坐标 x :[dom.offset().left + width / 2]; y : [dom.offset().top + height / 2]

鼠标进出点 P，距离文档左上角的坐标是： x : [event.pageX]; y : [event.pageY]

Q 点坐标与P 点坐标相减，就是 P 以 Q 为原点时它的坐标：x : [o.x - p.x]; y :[o.y - p.y]

javascript 的 Math 对象的 atan2(y, x) 可返回从 x 轴到点 (x,y) 之间的角度 a。

对 a 进行四区间的判断，即得到方向

如下：在 mousemove 事件中取得鼠标角度和所在方向

鼠标所在角度为：
鼠标所在方向为：

如下：根据鼠标进出方向的不同，添加不同的动画类名。CSS3 on

这项技术，可以很简便的做出 jQuery 插件，没多少行。有兴趣了解更多，可查看本文源码。