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

在线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. Datagrip连接SQLServer Connecting DataGrip to MS SQL Server

    Connecting DataGrip to MS SQL Server Posted on June 21, 2016 by Maksim Sobolevskiy Some specific nee ...

  2. 几个常见的Mysql索引问题

    1. 选择性较低的列是否适合加索引? 索引选择性等于列中不重复(distinct)的行数量(也叫基数),与记录总数的比值.范围在0-1之间.数值越大,索引越快. 例如主键是唯一的,不重复的,所以选择性 ...

  3. kotlin 语法跟 java 的不同

    本文是本人的作品,转载请表明出处 1.extends  用 (冐号):代替.MainActivity extends Activity, 现在是  MaiActivity :Activity() 2. ...

  4. 19款Windows实用软件推荐，满满的干货，总有一款是你必备的

    https://post.smzdm.com/p/745799/ 追加修改(2018-08-20 12:28:23):一些追加内容: 很多人都在吐槽为什么推荐Clover,这里我说明一下,就我了解到的 ...

  5. 3.nodejs(三) 常用API

    1.querystring querystring: --- > qs npm i qs ==> qs:parse/stringify第三方插件,只有一个参数 JSON.parse  字符 ...

  6. Java高并发系列 — AQS

    只懂volatile和CAS是不是可以无视concurrent包了呢,发现一个好链接,继续死磕,第一日: 首先,我承认很多时候要去看源码才能更好搞懂一些事,但如果站在巨人肩膀上呢?有了大概思想源码看还 ...

  7. elk-（七）

    最终架构确定为  logs--->blieb--->redis/kafka--->logstash--->es--->kibana 注意:  geoip下载地址: wge ...

  8. mysql limit 性能问题分析

    问题重现 // todo 参考文章: MySQL 单表分页 Limit 性能优化 Scalable MySQL: Avoid offset for large tables 证明为什么用limit时, ...

  9. linux命令 网络篇

    linux常用命令 netstat 语法(命令)  主要查看端口状态 netstat  语法 netstat -t/tcp 显示Tcp传输协议连线状况; netstat -u/udp 显示UDP传输协 ...

  10. DEDE暴力破解后台登录页面

    DEDE暴力破解后台登录页面 #!/usr/bin/env python '''/* * author = Mochazz * team = 红日安全团队 * env = pyton3 * */ '' ...