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

在线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. k8s(4)-使用服务公开应用程序

    Kubernetes中的服务是一个抽象,它定义了一组逻辑Pod和一个访问它们的策略.服务允许从属Pod之间的松散耦合.与所有Kubernetes对象一样,使用YAML (首选)或JSON 定义服务.服 ...

  2. Mac Eclipse安装lombok

    Lombok是一个可以通过注解的形式可以帮助消除一些必须但是显得很臃肿的Java代码的工具,通过使用对应的注解,可以在进行编译源码的时候生成对应的方法,比如类属性的get/set/toString() ...

  3. 怎么用js编写1——100的质数？

    这里来自csdn问答的一个问题,怎么用js编写1——100的质数? http://ask.csdn.net/questions/214429 质数也就是素数,即只能被1和自身整除的数,因此可以构造循环 ...

  4. Hadoop简单介绍

    Hadoop历史 雏形开始于2002年的Apache的Nutch,Nutch是一个开源Java 实现的搜索引擎.它提供了我们运行自己的搜索引擎所需的全部工具.包括全文搜索和Web爬虫. 随后在2003 ...

  5. PHP函数之dirname()

    1. 定义和用法 dirname()函数返回路径中的目录部分.即返回去掉文件名后的目录名. 2. 参数 dirname(path): 参数 path是一个包含有指向一个文件的全路径的字符串. 3. 举 ...

  6. Oracle数据库实例的启动及关闭

    要启动和关闭数据库,必须要以具有Oracle 管理员权限的用户登陆,通常也就是以具有SYSDBA权限的用户登陆.一般我们常用SYS用户以SYSDBA连接来启动和关闭数据库.下面介绍Oracle数据库几 ...

  7. 12.vue属性.监听.组件

    1.计算属性 https://cn.vuejs.org/v2/guide/computed.html new Vue({ computed:{//定义 show(){ } } }) ++计算属性1.h ...

  8. json转换学习

    文章部分代码实体类可以忽略. 原文:https://www.cnblogs.com/free-dom/p/5801866.html 代码如下: package covert; import java. ...

  9. python全栈开发 * 10知识点汇总 * 180612

    10 函数进阶 知识点汇总 一.动态参数 形参的第三种1.动态接收位置传参 表达:*args (在参数位置编写 * 表⽰接收任意内容) (1)动态位置参数def eat(*args): print(a ...

  10. java awt 中文乱码 显示为 方块

    今天调试同学的五子棋程序,同学的界面是用awt写的,运行的时候,发现菜单栏中的中文都无法正常显示,而是变为了一个个方框, 类似于这样:(图片来源于网络) 即使做了字体设置,比如设置为宋体,也还是无法正 ...