用JQ判断鼠标移入DIV的方向,并从该方向移出遮罩
一个比较有意思的特效
<--html部分代码-->
<div class="wrap" >
<ul class="list" id='list'>
<li><img src='images/1.gif'/><div>图片一</div></li>
<li><img src='images/2.jpg'/><div>图片二</div></li>
<li><img src='images/3.jpg'/><div>图片三</div></li>
<li><img src='images/4.png'/><div>图片四</div></li>
<li><img src='images/5.jpg'/><div>图片五</div></li>
<li><img src='images/6.png'/><div>图片六</div></li>
<li><img src='images/7.png'/><div>图片七</div></li>
<li><img src='images/8.jpg'/><div>图片八</div></li>
<li><img src='images/9.jpg'/><div>图片九</div></li>
<li><img src='images/10.jpg'/><div>图片十</div></li>
<li><img src='images/7.png'/><div>图片七</div></li>
<li><img src='images/8.jpg'/><div>图片八</div></li>
</ul>
</div>
<--CSS部分代码-->
<--
body,ul,li,img{margin: 0;padding: 0}
body{background: #f8f8f8}
.wrap{width: 720px;margin: 30px auto;padding: 10px;}
.list{float: left;height: auto;background: #fff;border: 1px solid #ccc;width: 100%}
.list li{cursor: pointer;margin:10px;position: relative;list-style-type: none;float: left;overflow: hidden;}
.list li img{float: left;}
.list li div{position: absolute;background:#F2528E;opacity: 0.8;filter:alpha(opacity:80);color:#fff;font-size:28px;text-align:center;line-height:150px;top:150px }
.list img,.list div{height: 150px;width: 220px;}
-->
<--JS部分代码-->
<script src='./jquery-1.8.js'></script> //引入JQ
<script>
var timer = null;
$('li').mouseenter(function(e) {
var oDiv = $(this).find('div');
oDiv.css({left: 0, top: 0});
var iDirection = mousemovedirection(this, e);
switch(iDirection) {
case 0 : oDiv.css('top', '-150px'); break;
case 1: oDiv.css('left', '220px'); break;
case 2: oDiv.css('top', '150px'); break;
default: oDiv.css('left', '-220px')
}
timer = setTimeout(function() {
oDiv.animate({left: 0, top: 0}, 200)
}, 100)
}).mouseleave(function(e) {
clearTimeout(timer);
var oDiv = $(this).find('div');
var iDirection = mousemovedirection(this, e);
switch(iDirection) {
case 0 : oDiv.animate({top: -150}, 200); break;
case 1: oDiv.animate({left: 220}, 200); break;
case 2: oDiv.animate({top: 150}, 200); break;
default: oDiv.animate({left: -220}, 200)
}
});
function mousemovedirection(o, e) { //这里是判断鼠标移入方向的方法,返回的数字可能是0, 1, 2, 3 分别对应表示的是 上, 右, 下, 左这几个方向。
- var w = o.offsetWidth;
- var h = o.offsetHeight;
- var x = (e.pageX - o.offsetLeft - (w/2)) * (w > h ? (h/w) : 1);
- var y = (e.pageY - o.offsetTop - (h/2)) * (h > w ? (w/h) : 1);
- var direction = Math.round((((Math.atan2(y, x) * (180/Math.PI)) + 180) / 90) + 3) % 4;
- var evenType = e.type;
- return direction;
}
</script>