<!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; ???????????width: 1250px; ???????????overflow: hidden; ???????} ???????#box li{ ???????????position: relative; ???????????float: left; ???????????width: 250px; ???????????height: 250px; ???????????overflow: hidden; ???????} ???????#box li img { ???????????width: 100%; ???????????height: 100%; ???????} ???????#box li .shadow { ???????????position: absolute; ???????????left: -1000px; ???????????top: 0; ???????????width: 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" > ???????????<div class="shadow">第1页</div> ???????</li> ???????<li> ???????????<img src="images/2.png" > ???????????<div class="shadow">第2页</div> ???????</li> ???????<li> ???????????<img src="images/3.png" > ???????????<div class="shadow">第3页</div> ???????</li> ???????<li> ???????????<img src="images/4.png" > ???????????<div class="shadow">第4页</div> ???????</li> ???????<li> ???????????<img src="images/5.png" > ???????????<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>以上图片路径更换即可。
js之方向检测
原文地址：https://www.cnblogs.com/bgwhite/p/9476286.html