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

在线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. postgresql修改数据库编码

    update pg_database set encoding = pg_char_to_encoding('UTF8') where datname = 'your_database'; 先用 \e ...

  2. Solve Error: "errcode": 85005, "errmsg": "appid not bind weapp hint"

    在使用微信官方给的添加自定义菜单的示例代码: { "button":[ { "type":"click", "name" ...

  3. C++中获取汉字拼音首字缩写/全拼及生僻字的处理

    最近一直在修改关于搜索不到生僻字的问题,最后得出结论:对生僻字的处理,办法只有一个,建立一个字库,然后查表找. 可以参考一下:http://download.csdn.net/detail/lshlw ...

  4. Sring 类的例子

    public class ZongHe {     public static void main(String[] args) {     function1();            funct ...

  5. Oracle课程档案，第三天

    count(*):有多少行,对行做统计 count(x):列.... sum:和 avg:平均值 min:求最小值 max:求最大值 distinct:取出重复的值 count:计数 group by ...

  6. str、tuple、dict之间的相互转换

    字符串.字典.元祖之间的相互转换: 1.字符串与列表之间的转换 str1 = 'ADMINphuang' '''str--->list''' list1=str1.split('p') prin ...

  7. 2^n算法

    题目描述: 如题…… 那么,可以用c++自带快速幂:pow: #include<cstdio> using namespace std; int n; int main() { scanf ...

  8. call()的个人理解

    先看两道道面试题 面试题1: var number = 50; var obj = { number: 60, getNum: function() { var number = 70; return ...

  9. sale.order

    # 初始化一个变量用来记录产品类型line_type = ''# 循环明细行for product in self.options: # 拿到该明细行的产品类型 product_type = prod ...

  10. static final 内部类

    1 static关键字 1.1 static关键字概述类中的属性和方法都是通过创建本类对象调用的,当在调用对象的某个方法时,这个方法没有访问到对象的特有数据时,方法创建这个对象有些多余,可是不创建对象 ...