<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>判断鼠标移入移出方向</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        .outer {

            width: 400px;

            height: 400px;

            border: 2px solid orange;

            margin: 100px auto;

            overflow: hidden;

        }

        .outer div {

            width: 100%;

            height: 100%;

            background-color: yellow;

            opacity: 0.5;

            display: none;

        }

    </style>

</head>

<body>

<div id="box" class="outer">

    <div id="mask" style="left: 0;top:0;"></div>

</div>

<script type="text/javascript">

    var oDiv = document.getElementById('box');

    var oMask = document.getElementById('mask');

    oDiv.disL = oDiv.offsetLeft;

    oDiv.disT = oDiv.offsetTop;

    oDiv.disR = oDiv.disL + oDiv.offsetWidth;

    oDiv.disB = oDiv.disT + oDiv.offsetHeight;

    oDiv.addEventListener('mouseenter', moveIn, false);

    oDiv.addEventListener('mouseleave', moveOut, false);

    function moveIn(e) {

        var resL = Math.abs(e.clientX - oDiv.disL),//距离左边

                resT = Math.abs(e.clientY - oDiv.disT),//距离上边

                resR = Math.abs(e.clientX - oDiv.disR),//距离右边

                resB = Math.abs(e.clientY - oDiv.disB);//距离下边

        var min = Math.min(resL, resB, resR, resT);

        //console.log(resL, resB, resR, resT, min);

        if (min === resL) {

            console.log('左边移入');

            maskIn('left');

        } else if (min === resT) {

            console.log('上边移入');

            maskIn('top');

        } else if (min === resR) {

            console.log('右边移入');

            maskIn('right');

        } else {

            console.log('下边移入');

            maskIn('bottom');

        }

    }

    function moveOut(e) {

        var resL = Math.abs(e.clientX - oDiv.disL),//距离左边

                resT = Math.abs(e.clientY - oDiv.disT),//距离上边

                resR = Math.abs(e.clientX - oDiv.disR),//距离右边

                resB = Math.abs(e.clientY - oDiv.disB);//距离下边

        var min = Math.min(resL, resB, resR, resT);

        //console.log(resL, resB, resR, resT, min);

        if (min === resL) {

            //console.log('左边移出');

            maskOut('left');

        } else if (min === resT) {

            //console.log('上边移出');

            maskOut('top');

        } else if (min === resR) {

            //console.log('右边移出');

            maskOut('right');

        } else {

            //console.log('下边移出');

            maskOut('bottom');

        }

    }

    function maskIn(direction) {

        var attr = 'marginTop', otherAttr = 'marginLeft', step = -15, maxDis = 'offsetHeight';

        if (direction === 'left' || direction === 'top') {

            step = 15;

        }

        if (direction === 'left' || direction === 'right') {

            attr = 'marginLeft';

            maxDis = 'offsetWidth';

            otherAttr = 'marginTop';

        }

        clearInterval(oMask.timer);

        step < 0 ? oMask.style[attr] = oDiv[maxDis] + 'px' : oMask.style[attr] = -oDiv[maxDis] + 'px';

        oMask.style[otherAttr] = 0;

        oMask.style.display = 'block';

        oMask.timer = setInterval(function () {

            var disL = parseFloat(oMask.style[attr]) + step;

            if (step > 0) {

                if (disL >= 0) {

                    oMask.style.marginLeft = 0;

                    oMask.style.marginTop = 0;

                    clearInterval(oMask.timer);

                } else {

                    oMask.style[attr] = disL + 'px';

                }

            } else {

                if (disL <= 0) {

                    oMask.style.marginLeft = 0;

                    oMask.style.marginTop = 0;

                    clearInterval(oMask.timer);

                } else {

                    oMask.style[attr] = disL + 'px';

                }

            }

        }, 10);

    }

    function maskOut(direction) {

        clearInterval(oMask.timer);

        oMask.style.marginLeft = 0;

        oMask.style.marginTop = 0;

        var attr = 'marginTop', step = 15, maxDis = 'offsetHeight';

        if (direction === 'left' || direction === 'top') {

            step = -15;

        }

        if (direction === 'left' || direction === 'right') {

            attr = 'marginLeft';

            maxDis = 'offsetWidth';

        }

        oMask.timer = setInterval(function () {

            var disL = parseFloat(oMask.style[attr]) + step;

            if (step < 0) {

                if (disL <= -oDiv[maxDis]) {

                    oMask.style.display = 'none';

                    clearInterval(oMask.timer);

                } else {

                    oMask.style[attr] = disL + 'px';

                }

            } else {

                if (disL >= oDiv[maxDis]) {

                    oMask.style.display = 'none';

                    clearInterval(oMask.timer);

                } else {

                    oMask.style[attr] = disL + 'px';

                }

            }

        }, 10);

    }

</script>

</body>

</html>

JS实现穿墙效果(判断鼠标划入划出的方向)的更多相关文章

  1. jQuery鼠标划入划出

    今天来简单的谈谈jQuery的一个划入划出的方法,.首先划入划出能想到的东西有哪些呢,. 1:hover 2:mouseenter/mouseleave 3:mouseover/mouseout. 一 ...

  2. JS用斜率判断鼠标进入DIV四个方向的方法 判断鼠标移入方向

    本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识, ...

  3. CSS动画划入划出酷炫

    HTML插入 <!DOCTYPE html> <html class="no-js iarouse"> <head> <meta char ...

  4. 通信录分组并且分组标签悬停划入划出（包含错误信息及修改）--第三方开源--PinnedSectionListView

    PinnedSectionListView在github上的链接地址是:https://github.com/beworker/pinned-section-listview . 下载下来后直接将Pi ...

  5. NGUI中 鼠标划出屏幕后，停止对 UIDragScrollView 的 press

    using UnityEngine; /// <summary> /// NGUI中 鼠标划出屏幕后,停止对 UIDragScrollView 的 press /// </summa ...

  6. JS判断鼠标移入元素的方向

    最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...

  7. JS判断鼠标从什么方向进入一个容器

    偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...

  8. JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题

    1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...

  9. js中判断鼠标滚轮方向的方法

      前  言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...

随机推荐

  1. C#实现窗口拖动时各个控件同比自己主动放缩大小

    实现方式主要是利用panel控件为主题.对于每一个控件的大小位置和字体这几个属性进行记录. 然后依据窗口改变的大小同一时候放缩. 简要过程例如以下: 1 创建C#窗口程序项目. 2  Panel放置到 ...

  2. java使用默认线程池踩过的坑（二）

    云智慧(北京)科技有限公司 陈鑫 是的.一个线程不可以启动两次.那么它是怎么推断的呢? public synchronized void start() { /** * A zero status v ...

  3. J2SE基础:2.对象的创建与使用

    1:參数传递的值传递与引用传递 A:值传递:基本数据类型传递都是值传递 B:引用传递(地址传递):对象数据类型都是引用传递. 2:类变量与成员变量(实例变量,对象变量) 类变量:通过类名调用,类变量被 ...

  4. hdu5305 Friends(dfs+map/hash)

    题目:pid=5305">http://acm.hdu.edu.cn/showproblem.php?pid=5305 题意:给定N个人和M条朋友关系,是朋友关系的两个人之间有两种联系 ...

  5. spring set注入

    上篇文章说到了构造器注入.可是有时候构造器注入并非非常好用,如今来看下set注入. 构造器注入博客地址:http://blog.csdn.net/luckey_zh/article/details/4 ...

  6. Android自己定义动态布局 — 多图片上传

    Android自己定义动态布局 - 多图片上传 本文介绍Android中动态布局加入图片,多图片上传. 项目中效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5 ...

  7. 操作系统 linux 内核的三种进程调度方法

    1.SCHED_OTHER 分时调度策略: 2.SCHED_FIFO 实时调度策略.先到先服务: 3,SCHED_RR 实时调度策略,时间片轮转 . 实时进程将得到优先调用,实时进程依据实时优先级决定 ...

  8. CentOS6.5下的Nagios安装配置详解（图文）

    最近因为,科研需要,接触上了Nagios,这里,我将安装笔记做个详解.为自己后续需要和博友们学习! VMware workstation 11 的下载 VMWare Workstation 11的安装 ...

  9. SSH远程快速登录Linux

    SSH远程快速登录Linux        使用SSH管理linux服务器,通常要使用ssh,然后输入用户,密码,其实只要配置一个文件就可以方便登录.假设要登录server域名是www.interne ...

  10. Android ijkplayer详解使用教程

    1.认识ijkplayer 最近公司准备开发一款视频播放及直播的应用,找了许多开源的框架,大部分都是基于ffmpeg开发的.最开始准备用Vitamio框架开发的,相关的文章也比较丰富,结果对于非个人移 ...