<!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. JAVA基础补漏--List

    Arraylist 通过对ArrayList的源码的查看,他的底层实现是对数组进行数据的操作,所以他的数据特点同数组. 查询快,因为他的内存区域为一个整块,可直接根据索引进行查询. 增删慢,因为每次增 ...

  2. .net知识点汇总

    死锁的必要条件?怎么克服? 答:系统的资源不足,进程的推进的顺序不合适,资源分配不当,一个资源每次只能被一个进程使用,一个资源请求资源时,而此时这个资源已阻塞,对已获得资源不放,进程获得资源时,未使用 ...

  3. replace()函数用法

    replace()函数表示将用一个字符串替换字符串中的所出现的特定内容. 语法为:replace(字段1,字段2,字段3),意思为字段3将会替换字段1里与字段2相同的内容  列如: table1 st ...

  4. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  5. 英语每日阅读---4、VOA慢速英语(翻译+字幕+讲解):专家:城市发展将加剧住房危机

    英语每日阅读---4.VOA慢速英语(翻译+字幕+讲解):专家:城市发展将加剧住房危机 一.总结 一句话总结:城市化(越来越多的人会住进城市)是必然趋势,人口增长也是必然趋势,人口增长必然会加大住房危 ...

  6. JS正则表达式入门，看这篇就够了

    前言 在正文开始前,先说说正则表达式是什么,为什么要用正则表达式?正则表达式在我个人看来就是一个浏览器可以识别的规则,有了这个规则,浏览器就可以帮我们判断某些字符是否符合我们的要求.但是,我们为什么要 ...

  7. phalcon: 目录分组后的acl权限控制

    phalcon: 目录分组后的acl权限控制 楼主在做acl权限的时候,发现官方的acl只能针对未分组的目录,如下: app/ ___|./controller ___|./logic ___|./p ...

  8. Mysql5.7基于事务转为基于日志

    先决条件 master端执行 flush logs;show master status; 获取file和position slave端执行 stop slave; change master to ...

  9. 1-18 编译安装内核支持ntfs文件系统

    大纲: 源码编译Linux内核 使用Linux内核模块 实战:编译一个NTFS内核模块,实现Linux挂载NTFS文件系统并实现读写功能 =============================== ...

  10. eclipse安装插件：

    eclipse安装插件:jre跟eclipse的bit数必须匹配,即必须都是32or64位的 历史版本不好找,pydev的历史版本在sourceforge中很隐蔽,得在项目的activite中查找,另 ...