鼠标进入容器方向检测

原创 JS~Noob 随笔 DOM小效果 1494阅读 2017-06-13 16:00:25 举报

[color=#002060][color=#00b0f0]###一、背景来一波[color=#00b0f0][/color][/color][/color]

之前用过的难懂版!9[/color]

      鼠标进入容器方向检测——鼠标从(上右下左)哪一边进入的盒子?
      之前一直用麻友的代码,如下:
     **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就会分别对应下,右,上,左。
       [color=#00b0f0]这样的实现也很简洁,就是不容易想明白,对于我这种高中数学忘光光的人儿,总是不太舒服的。###
     ###(没有攻击原作者的意思,只是我数学太菜,贡献代码的宝宝万万岁!!79)
       我觉得没有必要这么复杂,下面的是我的实现方式,各位麻友来看看有没有问题

[color=#00b0f0]###二、翠花,上酸菜[color=#92cddc][/color][/color]
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 )
最新评论
前端的路上有我 2017-06-28 09:20:57 2F

你的这种好理解

97646476 2017-06-26 09:51:15 1F

厉害了,高智商选手