.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方向检测</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#box {
margin: 30px auto;
1250px;
overflow: hidden;
}
#box li{
position: relative;
float: left;
250px;
height: 250px;
overflow: hidden;
}
#box li img {
100%;
height: 100%;
}
#box li .shadow {
position: absolute;
left: -1000px;
top: 0;
100%;
height: 100%;
line-height: 100px;
font-size: 30px;
text-align: center;
background: rgba(255, 255, 255, .4);
}
</style>
</head>
<body>
<ul id="box">
<li>
<img src="images/1.png" alt="">
<div class="shadow">第1页</div>
</li>
<li>
<img src="images/2.png" alt="">
<div class="shadow">第2页</div>
</li>
<li>
<img src="images/3.png" alt="">
<div class="shadow">第3页</div>
</li>
<li>
<img src="images/4.png" alt="">
<div class="shadow">第4页</div>
</li>
<li>
<img src="images/5.png" alt="">
<div class="shadow">第5页</div>
</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script>
<script>
$('#box li').bind('mouseenter mouseleave', function (e) {
var w = $(this).width();
var h = $(this).height();
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;
if(e.type === 'mouseenter') {
var startPos = {left: 0, top: 0};
switch(direction) {
case 0:
startPos = {left: 0, top: -h};
break;
case 1:
startPos = {left: w, top: 0};
break;
case 2:
startPos = {left: 0, top: h};
break;
case 3:
startPos = {left: -w, top: 0};
break;
}
$(this).children('.shadow').css(startPos).stop(true).animate({left: 0, top: 0});
} else if(e.type === 'mouseleave') {
var endPos = {left: 0, top: 0};
switch(direction) {
case 0:
endPos = {left: 0, top: -h};
break;
case 1:
endPos = {left: w, top: 0};
break;
case 2:
endPos = {left: 0, top: h};
break;
case 3:
endPos = {left: -w, top: 0};
break;
}
$(this).children('.shadow').stop(true).animate(endPos);
}
});
</script>
</body>
</html>
以上图片路径更换即可。