遮罩层特效(根据鼠标进入离开方向出现)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>遮罩层特效(根据鼠标进入离开方向出现)</title> <script src="/Scripts/jquery-1.8.3.min.js"></script> <script> $(function(){ var $li=$(".wrap>ul>li"); $li.each(function(index, element) { var $this=$(this); var $cover=$this.find(".cover"); $this.bind("mouseenter mouseleave",function(e){ var w = $(this).width(); var h = $(this).height(); /* 判断移动方向direction有 0 1 2 3四个值代表4个方向 */ 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); /* e.pageX 是 鼠标坐标X 相对于整个页面的坐标*/ /* e.pageY 是 鼠标坐标Y 相对于整个页面的坐标*/ /* this.offsetLeft 是 当前元素与相对父集的左部距离*/ /* this.offsetTop 是 当前元素与相对父集的上部距离*/ var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; var eventType = e.type; var dirName = new Array('上方','右侧','下方','左侧'); var name=dirName[direction]; if(eventType == 'mouseenter'){ switch(name){ case "上方": $cover.css({top:"-100%",left:0});break; case "右侧": $cover.css({left:"100%",top:0});break; case "下方": $cover.css({top:"100%",left:0});break; case "左侧": $cover.css({left:"-100%",top:0});break; } $cover.stop().animate({top:0,left:0},"slow"); }else{ switch(name){ case "上方": $cover.stop().animate({top:"-100%",left:0},"fast");break; case "右侧": $cover.stop().animate({left:"100%",top:0},"fast");break; case "下方": $cover.stop().animate({top:"100%",left:0},"fast");break; case "左侧": $cover.stop().animate({left:"-100%",top:0},"fast");break; } } }); }) }) </script> <style> .wrap {width:1120px;margin: 0 auto;position: relative;} .wrap ul{ padding:0; position: relative; } .wrap ul li{list-style:none;background: #d8d5d5; position:relative;height: 191px;margin: 0 auto 30px;overflow: hidden; } .wrap ul li .imgcover{ position:relative; overflow:hidden;} .wrap ul li .imgcover .cover{z-index: 0; width:100%;height:100%; background:#be4242;opacity:.8; filter:alpha(opacity=80); position:absolute;} .wrap ul li .imgcover .name{ font-size:30px; font-weight:bold;color:#fff;text-align:center; line-height: 191px;margin: 0;} .cover_info{ position: relative; z-index: 11; } </style> </head> <body> <div class="wrap"> <ul> <li> <div class="imgcover"> <div class="cover_info"> <p class="name">Climber's Delight</p> </div> <div class="cover"></div> </div> </li> <li> <div class="imgcover"> <div class="cover_info"> <p class="name">Climber's Delight</p> </div> <div class="cover"></div> </div> </li> <li> <div class="imgcover"> <div class="cover_info"> <p class="name">Climber's Delight</p> </div> <div class="cover"></div> </div> </li> <li> <div class="imgcover"> <div class="cover_info"> <p class="name">Climber's Delight</p> </div> <div class="cover"></div> </div> </li> <li> <div class="imgcover"> <div class="cover_info"> <p class="name">Climber's Delight</p> </div> <div class="cover"></div> </div> </li> </ul> </div> </body> </html>