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

在线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. node-log4js3.0.6配置

    const log4js = require('log4js'); const conf = { "appenders": { "access": { &quo ...

  2. Web容器初始化过程

    一.SpringMVC启动过程 Spring的MVC是基于Servlet功能实现的,每个web工程中都有一个web.xml文件,web容器在启动的时候会加载这个配置文件,当一个web应用加载到web容 ...

  3. [原]Chef_Server and Chef_WorkStation and Chef_Client Install Guide[by haibo]

    一.Prerequisite OS  :  CentOS-7.0-1406-x86_64-DVD.iso Time Server :   NTP Server SERVER NAME IP PLAN ...

  4. java生成excel，word文件

    第一部分: 在网站开发中,用户可能需要打印word或者excel表,这种需求是非常多的. java语言生成excel表格和python的方式有点像,使用Apache POI的组件,一通全通.开发过程通 ...

  5. electron打包后, 使用NSIS再打包成安装包 .exe文件

    NSIS下载地址

  6. 5. 文件上传下载 与 db数据库

    文件上传 formidable multer npm i formidable multer 如何使用见: https://www.npmjs.com/ util.inspect 自己查 文件上传:表 ...

  7. 10、DOM（文档对象模型）

    1.认识DOM html    骨架 css     装修 javascript 物业 ==DOM 打破上述三者的通道.== [注]script标签一般情况下要写在head标签. <div id ...

  8. mysql 查询排名 返回值拼接的骚操作

    故事背景: 依照原系统的框子搞一个新的系统给其他人使用,因为新的系统配置库依然需要使用原有的表,表中有字段区分新的系统,然后就有了这个很没劲的数据同步. 难点:配置库码表数据的主键之前是自增,后来改造 ...

  9. vue-cli+webpack+router+vuex---之vuex使用

    有信心的可以去看官方的文档 vue 的官方文档有个显著的特点---代码粘贴不全 Vue中文站:cn.vuejs.org vue-router官方教程:router.vuejs.org/zh-cn vu ...

  10. 自己配置 vue 项目 知识体系(自己写脚手架 类似 vue-cli )

    简单的目录结构: |-index.html |-main.js 入口文件 |-App.vue vue文件,官方推荐命名法 |-package.json 工程文件(项目依赖.名称.配置) npm ini ...