之前用过的难懂版!
鼠标进入容器方向检测——鼠标从(上右下左)哪一边进入的盒子?
之前一直用麻友的代码,如下:
javascript 代码
原理:以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π/4),[-π/4,π/4)划分为四个象限,鼠标进入容器时的点的atan2(y,x)值在这四个象限里分别对应容器边框的下,右,上,左。如下图所示
javascript 代码
计算x坐标值时,如果点原来的x坐标的绝对值大于圆的半径值,则按 h/w 这个比例进行缩小,使得到的点的位容器的边界位置所对应的象限区间里。 y 坐标的计算也是一样。
((Math.atan2(y, x) * (180 / Math.PI)将点的坐标对应的弧度值换算成角度度数值,这里加上180并非必要,只是为了使得到的0,1,2,3能够与习惯性的上,右,下,左的位置对照,如果不加上180,得到的0,1,2,3就会分别对应下,右,上,左。
这样的实现也很简洁,就是不容易想明白,对于我这种高中数学忘光光的人儿,总是不太舒服的。
(没有攻击原作者的意思,只是我数学太菜,贡献代码的宝宝万万岁!!79)
我觉得没有必要这么复杂,下面的是我的实现方式,各位麻友来看看有没有问题
二、翠花,上酸菜
html 代码
下面我来解释一下我是怎么想的
1,同样,以盒子的中心(centerX ,centerY)来创建一个坐标系
2,计算出鼠标进入盒子的时候的页面坐标 (pageX,pageY)
3,计算出鼠标进入点相对于本坐标系的坐标
javascript 代码
4,计算出来鼠标进入的点和坐标原点(盒子中心)连线在坐标系中的斜率(kMouse ),和对角线坐标(kFix)
javascript 代码
5,最后判断方向
5.1 若kMouse 大于零,则鼠标从以下这几个区域进入盒子
如果 kMouse 大于 kFix 则鼠标从以下两个方向进入
再通过点坐标的纵坐标 objy 得出鼠标从什么区域进入,进而得出哪一条边
**javascript 代码**
5.2 kMouse 小于零时分析逻辑与上雷同
**javascript 代码**
5.3 最后总结规律,合并代码得简洁版
javascript 代码
应该有所偏颇,请各位指正!!
评论 (2 )
最新评论
你的这种好理解
厉害了,高智商选手