<!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{1040px; margin:0 auto;}
.wrap ul li{list-style:none; float:left; 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{ 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;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
