<!doctype html><html><head><meta charset="utf-8"><title>遮罩层特效(根据鼠标进入离开方向出现)</title><script src="../../js/jquery-1.7.2.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); 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:1040px; margin:0 auto;}.wrap ul li{list-style:none; float:left; width:490px; position:relative;}.wrap ul li .imgcover{ position:relative; overflow:hidden;margin:10px;}.wrap ul li .imgcover img{ position:relative;}.wrap ul li .imgcover .cover{ width:100%;height:300px; background:#000; opacity:.8; filter:alpha(opacity=80); position:absolute;}.wrap ul li .imgcover .cover .name{ font-size:30px; font-weight:bold;color:#fff;top:15%; text-align:center; position:relative;}.cyclist{display:block;position:relative;top:20%;margin:20px 0; position:relative;width:67px; margin:0 auto;}</style></head><body><div class="wrap"><ul> <li> <div class="imgcover"> <img src="01.jpg" alt="" height="623"/> <div class="cover" style="height:623px;"> <p class="name">Climber's Delight</p> <img alt="Brad Feld" src="02.png" class="cyclist"> </div> </div> </li> <li> <div class="imgcover"> <img src="01.jpg" alt=""/> <div class="cover"> <p class="name">Climber's Delight</p> <img alt="Brad Feld" src="02.png" class="cyclist"> </div> </div> </li> <li> <div class="imgcover"> <img src="01.jpg" alt=""/> <div class="cover"> <p class="name">Climber's Delight</p> <img alt="Brad Feld" src="02.png" class="cyclist"> </div> </div> </li> <li> <div class="imgcover"> <img src="01.jpg" alt=""/> <div class="cover"> <p class="name">Climber's Delight</p> <img alt="Brad Feld" src="02.png" class="cyclist"> </div> </div> </li> <li> <div class="imgcover"> <img src="01.jpg" alt=""/> <div class="cover"> <p class="name">Climber's Delight</p> <img alt="Brad Feld" src="02.png" class="cyclist"> </div> </div> </li></ul></div></body></html>附件：01.jpg 02.png
转载于:https://www.cnblogs.com/xchlsl/p/4479576.html
