js之方向检测

<!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>
以上图片路径更换即可。