title: 有趣的JavaScript。简单数学的应用 date: 2015-10-19 toc: true comments: true tags: [js,数学,算法] categories: JavaScript
<li>这个是2014年十一月份de在qq空间发布的。。。 搬到这里来。<br> <li>2015年10月19日 发布在www.zhaoguilin.com在,最后迁移至此。<br> <!--more--> 因为@R<br> 现在每当用到数学就想到曾经的。。 怀念完了,那就说说吧,首先这是我在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]+'离开');
}
});
对,就是这个公式:<br>
`JavaScript
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
`
实现了方向的判断.<br>
这真是一个巧妙的写法。<br>
<font color="red"> 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(‘上方’,’右侧’,’下方’,’左侧’);的下标。
</font><br>
很神奇,一个简单的高中数学知识,然你少写了N多的if~else~,而且看起来也变得高大上了~
哈哈。。