监听鼠标划入方向，出现遮罩层+css3动画
<!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>
效果图如下：
贪多嚼不烂
