因为@R
现在每当用到数学就想到曾经的。。 怀念完了，那就说说吧，首先这是我在google上面发现的一个写法。看了代码后觉得挺神奇的，就想了下，瞬间觉得数学屌爆了~ 首先说，我们要实现的效果，就是判断鼠标进入和离开元素/元素的方向。 首先，一个普通人的想法应该是找到元素的边框坐标，然后进行判断。但是google到的这个JavaScript，仅仅用了一个高中数学小技巧及完美搞定了，而且给人一种高达上的感觉。 看JavaScript代码… ```javascript $("#wrap").bind("mouseenter mouseleave",function(e) { var w = $(this).width(); var h = $(this).height(); var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左” var eventType = e.type; var dirName = new Array('上方','右侧','下方','左侧'); if(e.type == 'mouseenter'){ $("#result").html(dirName[direction]+'进入'); }else{ $('#result').html(dirName[direction]+'离开'); } }); ``` 对，就是这个公式：
```JavaScript var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; ``` 实现了方向的判断.
这真是一个巧妙的写法。
Math.atan2(y, x) 这句话首先拿到了鼠标进入点元素的点，然后使用atan2求出来这个点和元素中心所构成直线的反正切值，也就是所谓的弧度值、然后乘上了180 / Math.PI，很明显，这已经把弧度转换成了所对应的角度 ，但是由于Math.atan2(y, x) 的取值范围在-pi到pi之间，因此为了消除负数对结果的影响呢， 在公式后面加上了 180.转换后角度不再是-180~180，而是0~360，这样更加方便后面运算。最后 除以90然后加3在同 4取模，实现了和下方driName数组的对应，余数为0对应上方~ 最后公式诞生了Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; 它的结果对应了数组new Array(‘上方’,’右侧’,’下方’,’左侧’);的下标。
很神奇，一个简单的高中数学知识，然你少写了N多的if~else~，而且看起来也变得高大上了~ 哈哈。。