<!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="data:images/1.png" alt="">

            <div class="shadow">第1页</div>

        </li>

        <li>

            <img src="data:images/2.png" alt="">

            <div class="shadow">第2页</div>

        </li>

        <li>

            <img src="data:images/3.png" alt="">

            <div class="shadow">第3页</div>

        </li>

        <li>

            <img src="data:images/4.png" alt="">

            <div class="shadow">第4页</div>

        </li>

        <li>

            <img src="data: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>
以上图片路径更换即可。

js之方向检测的更多相关文章

  1. js／css 检测移动设备方向的变化 判断横竖屏幕

    js/css 检测移动设备方向的变化 判断横竖屏幕 方法一:用触发手机的横屏和竖屏之间的切换的事件 window.addEventListener("orientationchange&qu ...

  2. js 正则之检测素数

    原文:js 正则之检测素数 相信很多人应该看过这篇文章,我第一次看到的时候是11年的样子,那时候学vbs的时候看过这个问题.原文<检查素数的正则表达式>,在文章里已经解释了他是怎么判断的, ...

  3. 使用Python基于VGG/CTPN/CRNN的自然场景文字方向检测/区域检测/不定长OCR识别

    GitHub:https://github.com/pengcao/chinese_ocr https://github.com/xiaofengShi/CHINESE-OCR |-angle 基于V ...

  4. JS数组类型检测

    在强类型语言,数组类型检测是非常容易的事情(typeof就可以解决),而在弱语言JS数据类型就很容易混淆了. JS中常见的数据类型有:number.string.boolean.undefined.f ...

  5. js之客户端检测

    1 能力检测判断是否有某个属性或方法,例:在低版本中的opera浏览器中,window下有个opera属性 if (window.opera) { alert("opera"); ...

  6. js 正则之 检测素数

    相信很多人应该看过这篇文章,我第一次看到的时候是11年的样子,那时候学vbs的时候看过这个问题.原文<检查素数的正则表达式>,在文章里已经解释了他是怎么判断的,我就不啰嗦了.我们来说说 j ...

  7. JS 校验，检测，验证，判断函数集合

    http://jc-dreaming.iteye.com/blog/754690 /**  *判断对象是否为空 *Check whether string s is empty.  */  funct ...

  8. JS中类型检测方式

    在js中的类型检测目前我所知道的是三种方式,分别有它们的应用场景: 1.typeof:主要用于检测基本类型. typeof undefined;//=> undefined typeof 'a' ...

  9. js 数据类型及检测

    js中基本数据类型有6种number.string.undefined.null.boolean,Symbol (ES6 新增,表示独一无二的值),还有一种数据类型为引用数据类型统称为Object对象 ...

随机推荐

  1. CommonLang3 --StringUtils使用指南

    转载自(http://blog.csdn.net/xuxiaoxie/article/details/52095930)public static boolean isEmpty(CharSequen ...

  2. 异步：asyncio和aiohttp的一些应用（1）

    1. asyncio 1.1asyncio/await 用法 async/await 是 python3.5中新加入的特性, 将异步从原来的yield 写法中解放出来,变得更加直观. 在3.5之前,如 ...

  3. scrapy之Pymongo

    用Pymongo保存数据 爬取豆瓣电影top250movie.douban.com/top250的电影数据,并保存在MongoDB中. items.py class DoubanspiderItem( ...

  4. 爬虫bs4案例

    案例:使用BeautifuSoup4的爬虫 我们以腾讯社招页面来做演示:http://hr.tencent.com/position.php?&start=10#a 使用BeautifuSou ...

  5. LeetCode——Find Minimum in Rotated Sorted Array II

    Question Follow up for "Find Minimum in Rotated Sorted Array": What if duplicates are allo ...

  6. java高级特性（4）--枚举

    枚举(enum),是指一个经过排序的.被打包成一个单一实体的项列表.一个枚举的实例可以使用枚举项列表中任意单一项的值.枚举在各个语言当中都有着广泛的应用,通常用来表示诸如颜色.方式.类别.状态等等数目 ...

  7. MongoDB.Driver 2.4以上版本 在.NET中的基本操作

    MongoDB.Driver是操作mongo数据库的驱动,最近2.0以下版本已经从GitHub和Nuget中移除了,也就是说.NET Framework4.0不再能从官方获取到MongoDB的驱动了, ...

  8. AOP(面向切面)的粗俗理解

    百度百科的解释:AOP主要实现的目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程中的某个步骤或阶段,以获得逻辑过程中各部分之间低耦合性的隔离效果. 一个比较绕的概念,简单来说就是把不影响业 ...

  9. yii2出现的400错误

    来一段百度来的正常解决方法,注意有很大的坑! 第一种解决办法是关闭Csrf 1配置文件关闭 2控制器里面关闭 public function init(){ $this->enableCsrfV ...

  10. IOS-CocoaPods制作篇

    作者:wangzz 原文地址:http://blog.csdn.net/wzzvictory/article/details/20067595 转载请注明出处 如果觉得文章对你有所帮助,请通过留言或关 ...