jQuery鼠标悬停方向感知移入效果
Posted byeno
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery鼠标悬停方向感知移入效果相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery鼠标悬停方向感知移入效果</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: #2A2A2A
}
li {
list-style: none;
}
#wrap {
width: 800px;
height: 360px;
margin: 100px auto;
}
#wrap ul {}
#wrap ul li {
float: left;
margin: 5px;
width: 230px;
height: 360px;
position: relative;
overflow: hidden;
}
#wrap ul li img {
display: block;
}
#wrap ul li .cove {
width: 230px;
height: 220px;
position: absolute;
top: 0;
left: 230px;
background: url(img/new-bg.png);
padding: 140px 0 0 0;
}
#wrap ul li .cove p {
font-size: 14px;
font-family: 微软雅黑;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li>
<img src="img/1.png" alt="">
<a href="">
<div class="cove">
<p>pci1</p>
<p>Picture info 1</p>
</div>
</a>
</li>
<li>
<img src="img/2.png" alt="">
<a href="">
<div class="cove">
<p>pci2</p>
<p>Picture info 2</p>
</div>
</a>
</li>
<li>
<img src="img/3.png" alt="">
<a href="">
<div class="cove">
<p>pci3</p>
<p>Picture info 3</p>
</div>
</a>
</li>
<li>
<img src="img/4.png" alt="">
<a href="">
<div class="cove">
<p>pci4</p>
<p>Picture info 4</p>
</div>
</a>
</li>
<li>
<img src="img/5.png" alt="">
<a href="">
<div class="cove">
<p>pci5</p>
<p>Picture info 5</p>
</div>
</a>
</li>
<li>
<img src="img/6.png" alt="">
<a href="">
<div class="cove">
<p>pci6</p>
<p>Picture info 6</p>
</div>
</a>
</li>
</ul>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
(function() {
var $li = $('#wrap ul li');
$li.hover(function(ev) {
move.call(this, ev, true);
}, function(ev) {
move.call(this, ev, false);
});
function move(ev, bool) {
var top = $(this).offset().top;
var bottom = top + $(this).height();
var left = $(this).offset().left;
var right = left + $(this).width();
var x = ev.pageX,
y = ev.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('.cove').css({
left: 0,
top: '-360px'
}).animate({
top: 0
}, 200);
} else {
$(this).find('.cove').stop(1, 1).animate({
top: '-360px'
}, 200);
}
break;
case sB:
if (bool) {
$(this).find('.cove').css({
left: 0,
top: '360px'
}).animate({
top: 0
}, 200);
} else {
$(this).find('.cove').stop(1, 1).animate({
top: '360px'
}, 200);
}
break;
case sL:
if (bool) {
$(this).find('.cove').css({
left: '-230px',
top: 0
}).animate({
left: 0
}, 200);
} else {
$(this).find('.cove').stop(1, 1).animate({
left: '-230px'
}, 200);
}
break;
case sR:
if (bool) {
$(this).find('.cove').css({
left: '230px',
top: 0
}).animate({
left: 0
}, 200);
} else {
$(this).find('.cove').stop(1, 1).animate({
left: '230px'
}, 200);
}
break;
}
}
})();
</script>
</body>
</html>
链接：http://pan.baidu.com/s/1c1ONIMW
密码：llx9
以上是关于jQuery鼠标悬停方向感知移入效果的主要内容，如果未能解决你的问题，请参考以下文章
jquery如何animate防止叠加 例如我把鼠标不断移入移出 效果就会不断重复,如何防止呢?