<!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. 爬虫之动态HTML处理（Selenium与PhantomJS ）网站模拟登录

    #coding=utf-8from selenium import webdriverfrom selenium.webdriver.common.keys import Keysimport tim ...

  2. 解题报告：hdu 1276 士兵队列训练问题 - 简单题

    Problem Description 某部队进行新兵队列训练,将新兵从一开始按顺序依次编号,并排成一行横队,训练的规则如下:从头开始一至二报数,凡报到二的出列,剩下的向小序号方向靠拢,再从头开始进行 ...

  3. redmine修改附件储存路径

    如果想把redmine 1.x.x 版本中的attachments files 放在自定义的目录(例如/home/darkofday/redmineAttachFile/).执行下列命令:cd /ho ...

  4. Learning Perl 第六章习题第一题

    按照first name找last name 知识点: 1. hash的使用和初始化 2. 使用exists函数检测hash中的键是否存在

  5. 数据可视化——Matplotlib(1)

    导入相关模块 import matplotlib.pyplot as plt import pandas as pd import numpy as np 基本图表 散点图:scatter N = 1 ...

  6. vue削笔机

    // 1.vue 是异步更新dom // 2.vue修改多次状态,vue 只会渲染一次 // 3.vue变化侦查机制,每次状态的变化都会发出一个渲染信号. // 检查队列中是否存在,不存在将渲染操作添 ...

  7. findContours函数参数详解

    http://blog.csdn.net/dcrmg/article/details/51987348

  8. WPF：自定义ListBox的选择样式

    首先介绍一种简单地方法:就是通过自定义SystemColors类的参数来自定义WPF ListBox选择颜色的, SystemColors的HighlightBrushKey和HighlightTex ...

  9. Angular中form表单中input自动响应回车事件无效

    环境:angular.js 问题:当你在input框中输入搜索信息,然后回车键,信息消失而且也没有执行查询??? 原因:组合查询的代码不是<button ng-click="ch()& ...

  10. flask学习(三)：flask入门(URL)

    一. flask简介 flask是一款非常流行的python web框架,出生于2010年,作者是Armin Ronacher,本来这个项目只是作者在愚人节的一个玩笑,后来由于非常受欢迎,进而成为一个 ...