<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听鼠标划入方向，出现遮罩层+css3动画</title>
<style>
body,div,li,p,ul{margin:0;padding:0;font-size:14px;font-family:"Microsoft Yahei","微软雅黑",sans-serif;}
.clearfix::after{clear:both;display:block;height:0;content:'';}
li,ul{list-style:none;}
#container{margin:0 auto;width:966px;}
#container li{position:relative;float:left;overflow:hidden;margin:20px;width:280px;height:160px;border:1px solid #ccc;text-align:center;line-height:160px;cursor:pointer;}
#container li p{position:absolute;top:-160px;left:0;z-index:2;width:100%;height:160px;color:#fff;}
#container li .img{display:block;width:280px;height:160px;-webkit-transition:.5s ease-in;-moz-transition:.5s ease-in;-o-transition:.5s ease-in;transition:.5s ease-in;-ms-transition:.5s ease-in;}
#container li:hover .img{-webkit-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1);transform:scale(1.1,1.1);}
#container li p i{position:absolute;top:0;left:0;z-index:-1;display:block;width:100%;height:100%;background:#000;font-size:16px;opacity:.7;-moz-opacity:.7;filter:alpha(opacity=70);}
#container li p span{display:block;margin:0 auto;padding-top:60px;width:94%;font-size:12px;line-height:24px;}
#container li p a{position:absolute;top:20px;left:50%;display:block;margin-left:-16px;width:32px;height:32px;background:url(http://www.jsdaima.com/Upload/1471438131/link.png) no-repeat 0 0;}
.explain{display:block;margin:0 auto;}
</style>
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
</head>
<body>
<ul id="container" class="clearfix">
<li>
<img class="img" src="image/qsmy1.png">
<p>
<span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
<li>
<img class="img" src="image/qsmy2.png">
<p>
<span>一半在土里安详，一半在风里飞扬，一半洒落阴凉，一半沐浴阳光。</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
<li>
<img class="img" src="image/qsmy3.png">
<p>
<span>非常沉默非常骄傲，从不依靠从不寻找。</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
<li>
<img class="img" src="image/qsmy4.png">
<p>
<span>如果有来生，有没有人爱，我也要努力做一个可爱的人。</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
<li>
<img class="img" src="image/qsmy5.png">
<p>
<span>不埋怨谁，不嘲笑谁，也不羡慕谁，阳光下灿烂，风雨中奔跑，做自己的梦，走自己的路。</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
<li>
<img class="img" src="image/qsmy6.png">
<p>
<span>如果有来生——三毛</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
</ul>
<script>
$("#container li").each(function(){
$(this).on('mouseenter',function(e){
var e=e||window.event;
var angle=direct(e,this)
mouseEvent(angle,this,'in')
})
$(this).on('mouseleave',function(e){
var e=e||window.event;
var angle=direct(e,this)
mouseEvent(angle,this,'off')
})
})
function direct(e,o){
var w=o.offsetWidth;
var h=o.offsetHeight;
var top= o.offsetTop; //包含滚动条滚动的部分
var left= o.offsetLeft;
var scrollTOP=document.body.scrollTop||document.documentElement.scrollTop;
var scrollLeft=document.body.scrollLeft||document.documentElement.scrollLeft;
var offTop=top- scrollTOP;
var offLeft= left- scrollLeft;
//console.log(offTop+";"+offLeft)
//e.pageX|| e.clientX;
//pageX 是从页面0 0 点开始 clientX是当前可视区域0 0开始 即当有滚动条时clientX 小于 pageX
//ie678不识别pageX
//PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同) 页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度
var ex= (e.pageX-scrollLeft)|| e.clientX;
var ey=(e.pageY-scrollTOP)|| e.clientY;
var x=(ex-offLeft-w/2)*(w>h?(h/w):1);
var y=(ey-offTop-h/2)*(h>w?(w/h):1);
var angle=(Math.round((Math.atan2(y,x)*(180/Math.PI)+180)/90)+3)%4 //atan2返回的是弧度 atan2(y,x)
var directName=["上","右","下","左"];
return directName[angle]; //返回方向 0 1 2 3对应 上 右 下 左
}
function mouseEvent(angle,o,d){ //方向 元素 鼠标进入/离开
var w=o.offsetWidth;
var h=o.offsetHeight;
if(d=='in'){
switch(angle){
case '上':
$(o).find("p").css({left:0,top:-h+"px"}).stop(true).animate({left:0,top:0},300)
setTimeout(function(){
$(o).find("p a").css({left:'50%',top:-h+"px"}).stop(true).animate({left:'50%',top:'20px'},300)
},200)
break;
case '右':
$(o).find("p").css({left:w+"px",top:0}).stop(true).animate({left:0,top:0},300)
setTimeout(function(){
$(o).find("p a").css({left:w+"px",top:'20px'}).stop(true).animate({left:'50%',top:'20px'},300)
},200)
break;
case '下':
$(o).find("p").css({left:0,top:h+"px"}).stop(true).animate({left:0,top:0},300)
setTimeout(function(){
$(o).find("p a").css({left:'50%',top:h+"px"}).stop(true).animate({left:'50%',top:'20px'},300)
},200)
break;
case '左':
$(o).find("p").css({left:-w+"px",top:0}).stop(true).animate({left:0,top:0},300)
setTimeout(function(){
$(o).find("p a").css({left:-w+"px",top:'20px'}).stop(true).animate({left:'50%',top:'20px'},300)
},200)
break;
}
}else if(d=='off'){
switch(angle){
case '上':
$(o).find("p a").stop(true).animate({left:'50%',top:-h+"px"},300)
setTimeout(function(){
$(o).find("p").stop(true).animate({left:0,top:-h+"px"},300)
},200)
break;
case '右':
$(o).find("p a").stop(true).animate({left:w+"px",top:'20px'},300)
setTimeout(function(){
$(o).find("p").stop(true).animate({left:w+"px",top:0},300)
},200)
break;
case '下':
$(o).find("p a").stop(true).animate({left:'50%',top:h+"px"},300)
setTimeout(function(){
$(o).find("p").stop(true).animate({left:0,top:h+"px"},300)
},200)
break;
case '左':
$(o).find("p a").stop(true).animate({left:-w+"px",top:'20px'},300)
setTimeout(function(){
$(o).find("p").stop(true).animate({left:-w+"px",top:0},300)
},200)
break;
}
}
}
</script>
</body>
</html>
效果图如下：
