jquery判断鼠标移动方向--版本2

之前网上收集过一个判断鼠标移动方向的demo，但是实现过程相对比较复杂，涉及到一些函数计算。

链接地址：http://blog.csdn.net/jian_xi/article/details/53427435

下面这个版本的代码毕竟容易看懂，先上效果图：



html代码：

<div class="box">
<ul>
<li>
<img src="img/1.jpg">
<div class="cover">
<p class="info">fasdfhggadsg</p>
</div>
</li>
<li>
<img src="img/2.jpg">
<div class="cover">
<p class="info">fasdfhggadsg</p>
</div>
</li>
<li>
<img src="img/3.jpg">
<div class="cover">
<p class="info">fasdfhggadsg</p>
</div>
</li>
<li>
<img src="img/4.jpg">
<div class="cover">
<p class="info">fasdfhggadsg</p>
</div>
</li>
<li>
<img src="img/5.jpg">
<div class="cover">
<p class="info">fasdfhggadsg</p>
</div>
</li>
</ul>
</div>

css代码：
*{
margin: 0;
padding: 0;
}
.box{
width: 1200px;
height: 360px;
margin: 100px auto;
}
.box ul li{
list-style: none;
width: 230px;
height: 360px;
float: left;
margin-right: 10px;
position: relative;
overflow: hidden;
}
.box ul li img{
display: block;
}
.box ul li .cover{
width: 230px;
height: 360px;
background: url(img/new-bg.png);
position: absolute;
left: 230px;
top:0;
}
.box ul li .cover p{
font-size: 14px;
font-family: "微软雅黑";
text-align: center;
color: #fff;
margin-top: 120px;
}

js:
(function(){
var $li = $(".box ul li");

$li.hover(function(e){
move.call(this,e,true);
},function(e){
move.call(this,e,false);
});

function move(e,bool){
var liTop = $(this).offset().top;
var liLeft = $(this).offset().left;
var liBottom = liTop + $(this).height();
var liRight = liLeft + $(this).width();

//获取鼠标的坐标
var ev = e || window.event;
var pagex = ev.pageX;
var pagey = ev.pageY;

//获取鼠标距离四条边的距离
var jtop = Math.abs(pagey - liTop);
var jbottom = Math.abs(pagey - liBottom);
var jleft = Math.abs(pagex - liLeft);
var jright = Math.abs(pagex - liRight);
console.log(jleft+"--"+jtop)
//获取四个值中的最小值，判断进入的方向
var min = Math.min(jtop,jbottom,jleft,jright);

switch(min){
case jtop:
if(bool){
$(this).find(".cover").css({
top:"-360px",
left:0
}).stop().animate({
top:"0"
});
}else{
$(this).find(".cover").stop().animate({
top:"-360px"
});
}
break;

case jleft:
if(bool){
$(this).find(".cover").css({
left:"-360px",
top:0
}).stop().animate({
left:"0"
});
}else{
$(this).find(".cover").stop().animate({
left:"-360px"
});
}
break;

case jbottom:
if(bool){
$(this).find(".cover").css({
top:"360px",
left:0
}).stop().animate({
top:"0"
});
}else{
$(this).find(".cover").stop().animate({
top:"360px"
});
}
break;

case jright:
if(bool){
$(this).find(".cover").css({
left:"360px",
top:0
}).stop().animate({
left:"0"
});
}else{
$(this).find(".cover").stop().animate({
left:"360px"
});
}
break;
}
}

})();

以上为该效果的全部实现过程！