本文要介绍的是一种鼠标从一个元素移入移出时，获取鼠标移动方向的思路。这个方法可以帮助你判断鼠标在移入移出时，是从上下左右的哪个方向发生的。这个思路，是我自己琢磨出来，利用了一点曾经高中学过的数学知识，但是非常简单好理解，希望能对你有所帮助。

在线demo：

http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html

http://liuyunzhuge.github.io/blog/mouse_direction/demo2.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JS用斜率判断鼠标进入DIV四个方向的方法</title>

    <style>

        .box{

            width: 200px;

            height: 200px;

            background-color: #3295F2;

        }

    </style>

</head>

<body>

    <div class="box" id="div1" tabindex="1"></div>

    <script>

       window.onload = function () {

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

            var x1 = oDiv.offsetLeft,

                y1 = -oDiv.offsetTop, //注意坐标，所有的y坐标都是负数

                x2 = x1 + oDiv.offsetWidth,

                y2 = y1 - oDiv.offsetHeight, //同样y坐标为负数

                x0 = (x1 + x2) / 2,

                y0 = (y1 + y2) / 2;

            var k = (y2 - y1) / (x2 - x1); //斜率k

            // alert(-k)

            oDiv.onmouseover = function (e) {

                var e = e || window.event;

                var x = e.clientX, //鼠标刚移入div内，记录下当前的x坐标

                    y = -e.clientY; //鼠标刚移入div内，记录下当前的y坐标

                var K = (y - y0) / (x - x0); //K是鼠标移入点和中心点的斜率

                //当K大于k并且小于-k时，则肯定是左右移入，当移入点的x坐标大于中心点 ，则为右移入，小于则是左移入

                if (k < K && K < -k) {

                    if (x > x0) {

                        alert('右');

                    } else {

                        alert('左');

                    }

                } else {

                    //注意此处y是负数，判断上下的方法同上

                    if (y > y0) {

                        alert('上');

                    } else {

                        alert('下');

                    }

                }

            }

        }

    </script>

</body>

</html>

相关链接： http://www.cnblogs.com/lyzg/p/5689761.html#commentform

JS用斜率判断鼠标进入DIV四个方向的方法 判断鼠标移入方向的更多相关文章

  1. jquery鼠标移动div内容上下左右滚动

    jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...

  2. js用斜率判断鼠标进入div的四个方向

    网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向. 上图是此方法的示意图,以浏览器左 ...

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

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

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

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

  5. 判断数组的方法/判断JS数据类型的四种方法

    参考文: 以下 3 个判断数组的方法,请分别介绍它们之间的区别和优劣Object.prototype.toString.call() . instanceof 以及 Array.isArray() h ...

  6. 鼠标拖放div 实现

    Javascript的mousemove事件类型是一个实时响应的事件,当鼠标指针的位置发生变化时(至少移动1个像素),就会触发mousemove事件.该事件响应的灵敏度主要参考鼠标指针移动速度的快慢, ...

  7. 鼠标拖拉div宽度

    先看效果 先进入页面 当鼠标停留在中间div时,鼠标变成双箭头 点击拖拉 往右边拉 往最左边拉 代码 <!DOCTYPE html> <html> <head> & ...

  8. JS去除数组中重复值的四种方法

    JS去除数组中重复值的四种方法 1 /// <summary>            o[this[i]] = "";  }      }       newArr.p ...

  9. js动态创建及移除div的方法

    本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

随机推荐

  1. 关于ping地址的几个意义

    1.ping 127.0.0.1 判断电脑的tcp/ip协议栈有没有问题 2.ping 本机ip 判断电脑的网卡驱动有没有问题 3.ping 网关 判断数据是否可以到达路由 4.ping www.ba ...

  2. Inside The C++ Object Model(四)

    ============================================================================4-1. Member 的各种调用方式静态成员函 ...

  3. macOS 10.13 High Sierra odoo11 开发配置--完整版

    1.抹盘安装macOS Sierra 10.13: 制作macOS安装启动盘参见:http://www.iplaysoft.com/macos-usb-install-drive.html 2.安装g ...

  4. VC++每个版本对应的库

    msvcp.msvcr60.71和80.dll,以及vcomp.dll(不带数字版本号)属于VC++2005版 msvcp.msvcr.vcomp90.dll属于 VC++2008版 msvcp.ms ...

  5. filter的知识点 和 实例

    一.过滤器Filter 1．filter的简介 filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目    标资源访问前后进行逻辑处理 2．快速入门 步骤: 1)编写一个 ...

  6. ubuntu下nodejs和npm的安装及升级

    ubuntu 下 nodejs 和 npm 的安装及升级 参考:https://segmentfault.com/a/1190000007542620 一:ubuntu下安装 node 和 npm命令 ...

  7. yarn集群客户端gateway常用限制

    spark默认集群模式,省略上传依赖包过程:spark-default.sh spark.yarn.jars hdfs:///${PATH}/sparkJar/jars/*.jarspark.subm ...

  8. 嵌入式常用技术概览之IIC(I2C)

    一.先决知识             (1)模电基础知识(用以理解IIC如何通信) 二.IIC概览               I2C是80年代飞利浦(Philips->NXP->高通)研 ...

  9. lucene学习教程

    1Lucene的介绍 ①Lucene是什么: 是一个开放源代码的全文检索引擎工具包,但它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎,部分文本分析引擎 ②Lu ...

  10. Echarts . 在柱状图中添加自定义值 (键值对)

    x ["需求"] {"0":"使用Echarts根据数据加载一个饼状图"} {"1":"点击哪个饼状图,弹出此 ...