你的位置:首页 > Java教程

[Java教程]判断鼠标移入移出元素时的方向


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

在线demo

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

相关代码

https://github.com/liuyunzhuge/blog/blob/master/mouse_direction/demo1.js

另外demo1.html里面还有部分逻辑代码。

效果演示:

demo1

思路详解

1. 把元素框分成如下四部分:

image

只要能判断出鼠标移入移出时属于哪个部分的范围内,问题即可解决。而这个判断可通过斜率,结合鼠标的位置与元素框中心点的位置比较得出。这个判断原理,采用下面的坐标系图解来说明。

2. 解决这个问题,建立如下图坐标系:

image

1)上图以浏览器可视区域左上角为原点建立坐标系,坐标系与数学坐标系方向一致,往右表示x轴正方向,往下表示y轴负方向;

2)图中点(x1,y1)代表元素框左上角,(x4,y4)代表元素框右下角,(x0,y0)代表元素框的中心点,(x,y)表示鼠标移入移出时与元素框的边的交点;

3)根据下面的公式:

image

可得(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

不过惭愧的是,我并没有看懂这个思路的原理,所以我这里也给不出解释说明了,虽然在别的地方看到了一些解释,但是并不是很清晰,所以我才去想有没有更简单理解的方法实现。实际工作中,我认为这两种思路都是可以使用的,用哪个凭自己喜好决定就行了。

总结

最后希望本文提供的这个小东西在你平常工作的时候,能够派上用场,为你的页面添加一些活泼的滑入滑出效果等等,同时也算是自己的一个积累。