<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标从不同方向移入-jq22.com</title>
<script src="../jquery-3.2.1.min.js"></script>
<style>
html,body {
height:100%;
overflow:hidden;
}
#wrap {
width:1400px;
height:100%;
margin:0px auto;
}
#wrap ul li {
position:relative;
float:left;
width:230px;
height:360px;
list-style:none;
margin-right:12px;
overflow:hidden;
}
#wrap ul li img {
display:block;
}
#wrap ul li .cover {
position:absolute;
width:230px;
height:360px;
top:0px;
left:230px;
background:url(./images/fergus_bg.png);
}
#wrap ul li .cover p {
font-size:14px;
color:#fff;
text-align:center;
}
#wrap ul li .cover p.p1 {
padding-top:160px;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li> <img width="230" height="360" src="images/fergus.png"/>
<div class='cover'>
<p class='p1'> 春夏新品 上新无限 </p>
<p> 点击进入 </p>
</div>
</li>
<li> <img width="230" height="360" src="images/fergus.png"/>
<div class='cover'>
<p class='p1'> 夏装新品发布 8折起 </p>
<p> 点击进入 </p>
</div>
</li>
<li> <img width="230" height="360" src="images/fergus.png"/>
<div class='cover'>
<p class='p1'> 春装特惠 买二送一 </p>
<p> 点击进入 </p>
</div>
</li>
<li> <img width="230" height="360" src="images/fergus.png"/>
<div class='cover'>
<p class='p1'> 春夏新品 低至158 </p>
<p> 点击进入 </p>
</div>
</li>
</ul>
</div><script>
(function() {
var $li = $('#wrap ul li');
$li.hover(function(e) {
move.call(this, e, true);
},
function(e) {
move.call(this, e, false);
});
function move(e, bool) {
var top = $(this).offset().top;
var bottom = top + $(this).height();
var left = $(this).offset().left;
var right = left + $(this).width();
var x = e.pageX,
y = e.pageY;
var sT = Math.abs(y - top),
sB = Math.abs(y - bottom),
sL = Math.abs(x - left),
sR = Math.abs(x - right);
var a = Math.min(sT, sB, sL, sR);
switch (a) {
case sT:
if (bool) {
$(this).find('.cover').css({
left:
0,
top: '-360px'
}).stop().animate({
top: 0
},
400);
} else {
$(this).find('.cover').stop().animate({
top: '-360px'
},
400);
}
break;
case sB:
if (bool) {
$(this).find('.cover').css({
left:
0,
top: '360px'
}).stop().animate({
top: 0
},
400);
} else {
$(this).find('.cover').stop().animate({
top: '360px'
},
400);
}
break;
case sL:
if (bool) {
$(this).find('.cover').css({
top:
0,
left: '-230px'
}).stop().animate({
left: 0
},
400);
} else {
$(this).find('.cover').stop().animate({
left: '-230px'
},
400);
}
break;
case sR:
if (bool) {
$(this).find('.cover').css({
top:
0,
left: '230px'
}).stop().animate({
left: 0
},
400);
} else {
$(this).find('.cover').stop().animate({
left: '230px'
},
400);
}
break;
}
//console.log( '距离顶部:'+sT+' 距离底部:'+sB+' 距离左边:'+sL+' 距离右边:'+sR )
};
})();</script>
</body>
</html>
