<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断鼠标进入容易的方向,js判断划入方向</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
$("#box").on("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 dirNum=Math.round((((Math.atan2(y,x)*(180/Math.PI))+180)/90)+3)%4;
/*
dirNum:0,1,2,3 ---> t r b l
以上代码是网友分享
以下代码是模仿拉勾网首页的一个小效果做的
*/
var eventType = e.type;
var aPos=[{left:0,top:-200},{left:200,top:0},{left:0,top:200},{left:-200,top:0}];
if(eventType == 'mouseenter'){
$("#box2").css(aPos[dirNum]).stop(true,true).animate({left:0,top:0},200);
}else{
$("#box2").stop(true,true).animate(aPos[dirNum],200);
}
});
});
</script>
<style>
#box{width: 200px;height: 200px;border:1px solid #999;margin: 200px auto;position:relative;zoom:1;overflow: hidden;}
#box1{height: 200px;background-color: orange;text-align: center;line-height: 200px;}
#box2{position: absolute;left: -200px;top: -200px;width: 200px;height: 200px;background-color: red;text-align: center;line-height: 200px;}
</style>
</head>
<body>
<div id="box">
<div id="box1">
#box1
</div>
<div id="box2">
#box2
</div>
</div>
</body>
</html>
//////////
/////////
实现原理
编者按:还记得亚马逊左侧分类导航的光速hover事件吗?它被一些闲的蛋疼的前端从业者无数次拿来津津乐道。刚好逛博客园的时候,又看到这样一篇文章,反正博客每天都需要更新,所以特此转来充个数,以下代码演示涉及到jQuery,建议前端大牛绕路。
就这么几行代码,将我印象里会有一长串的if else或者switch来完成的事完美的解决掉。在感到神奇之后,更多的是不解,因为看不懂。在网上搜索一番,也没有找到有谁来分析这个算法。于是自己研究了一下,现在写下来,作为自己的一份学习笔记,也希望能够和大家分享。
有不对的地方,或者有更好的理解,请告诉我,谢谢!
原理:以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π/4),[-π/4,π/4)划分为四个象限,鼠标进入容器时的点的atan2(y,x)值在这四个象限里分别对应容器边框的下,右,上,左。如下图所示
计算x坐标值时,如果点原来的x坐标的绝对值大于圆的半径值,则按 h/w 这个比例进行缩小,使得到的点的位置在容器的边界位置所对应的象限区间里。 y 坐标的计算也是一样。