<!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. cp 复制 mv剪切

    cp cp -p test.rb /home/test    将test.rb copy到test目录,并且保留原文件的属性cp -r Dir/ /home/test    将Dir目录copy到te ...

  2. linux top 各个标识的含义 详解

        top之前一直都是一知半解,今天周末加班,我的工作已经完成,在等同事吃饭,就把这个写下来. 第一行: top - 20:42:47 up 57 days,  1:25,  4 users,  ...

  3. Elasticsearch之分词器的作用

    前提 什么是倒排索引? Analyzer(分词器)的作用是把一段文本中的词按一定规则进行切分.对应的是Analyzer类,这是一个抽象类,切分词的具体规则是由子类实现的,所以对于不同的语言,要用不同的 ...

  4. Tornado异步(2)

    Tornado异步 因为epoll主要是用来解决网络IO的并发问题,所以Tornado的异步编程也主要体现在网络IO的异步上,即异步Web请求. 1. tornado.httpclient.Async ...

  5. LeetCode——remove-duplicates-from-sorted-list

    Question Given a sorted linked list, delete all duplicates such that each element appear only once. ...

  6. 自学Java测试代码 - 简单地Student类

    2017-08-23  23:45:38 writer:pprp 写这个还蛮开心的 package test; public class Student { //创建成员变量 String name ...

  7. [小问题笔记（四）] Enum枚举类型转换为DataTable（ C# ）

    枚举: public enum ProductType { 小产品=, 大产品, 超大产品 } 转换方法: /// <summary> /// 枚举类型转化为DataTable /// & ...

  8. spring boot 国际化MessageSource

    转自:https://blog.csdn.net/flowingflying/article/details/76358970 spring中ResourceBundleMessageSource的配 ...

  9. nRF5 SDK软件架构及softdevice工作原理

    本文将介绍Nordic nRF5 SDK软件架构以及softdevice工作原理,以加深大家对Nordic产品开发的理解,这样开发过程中碰到问题时,大家也知道如何去调试. 如果你刚开始接触nRF5 S ...

  10. [转]检测SQLSERVER数据库CPU瓶颈及内存瓶颈

    在任务管理器中看到sql server 2000进程的内存占用,而在sql server 2005中,不能在任务管理器中查看sql server 2005进程的内存占用,要用 以下语句查看sql se ...