<!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. Spring核心技术AOP案例

    在SpringAOP开发之前,首先要了解一下这几个概念.Target:目标,通俗的说对哪个类做增强,那个类就是目标.JoinPoint:连接点,在实际开发中可以被增强的点.PointCut:切入点,在 ...

  2. bzoj1879: [Sdoi2009]Bill的挑战(codevs2308)(luoguP2167) 状压dp

    唔...懒兔子来写博客了... 点我看题 这题的话...我想了很久但是都不是可行解 刚开始想预处理任意两个串是否可以匹配然后在乱搞,后来发现完全不会写... 然后按照惯例,我会看题解认真的思考... ...

  3. hdfs的FileSystem实例化

    前言 在spark中通过hdfs的java接口并发写文件出现了数据丢失的问题,一顿操作后发现原来是FileSystem的缓存机制.补一课先 FileSystem实例化 FileSystem.get(c ...

  4. pyspider—爬取下载图片

    以第一ppt网站为例:http://www.1ppt.com/ from pyspider.libs.base_handler import * import urllib2,HTMLParser,r ...

  5. mysql 跨库查询问题

    MySQL实现跨服务器查询 https://blog.csdn.net/LYK_for_dba/article/details/78180444 mysql> create database l ...

  6. linux ps 命令参数详解

    -a 显示所有终端机下执行的进程,除了阶段作业领导者之外. a 显示现行终端机下的所有进程,包括其他用户的进程. -A 显示所有进程. -c 显示CLS和PRI栏位. c 列出进程时,显示每个进程真正 ...

  7. 项目管理工具：Maven

    Maven是什么,作用是什么? Maven是项目管理工具,主要有两大作用:项目构建和依赖管理.项目构建就是项目编译.测试.集成发布实现自动化,依赖管理是很方便的功能,只要把当前项目所依赖的构件(jar ...

  8. STOMP协议规范【转】

    STOMP协议规范英文原文:http://stomp.github.io/stomp-specification-1.2.html STOMP协议规范译文原文:http://simlegate.com ...

  9. mvc 获取 HtmlHelper 表达式值

    public static MvcHtmlString Try<TModel, TProperty>( this HtmlHelper<TModel> htmlHelper, ...

  10. Codeforces Round #424

    基本全是水题 第一题水,不过有hack点,先增后不变再减 #include<map> #include<set> #include<cmath> #include& ...