本文要介绍的是一种鼠标从一个元素移入移出时，获取鼠标移动方向的思路。这个方法可以帮助你判断鼠标在移入移出时，是从上下左右的哪个方向发生的。这个思路，是我自己琢磨出来，利用了一点曾经高中学过的数学知识，但是非常简单好理解，希望能对你有所帮助。
在线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四个方向的方法 判断鼠标移入方向的更多相关文章
-
jquery鼠标移动div内容上下左右滚动
jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...
-
js用斜率判断鼠标进入div的四个方向
网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向. 上图是此方法的示意图,以浏览器左 ...
-
JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
-
js中判断鼠标滚轮方向的方法
前 言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...
-
判断数组的方法/判断JS数据类型的四种方法
参考文: 以下 3 个判断数组的方法,请分别介绍它们之间的区别和优劣Object.prototype.toString.call() . instanceof 以及 Array.isArray() h ...
-
鼠标拖放div 实现
Javascript的mousemove事件类型是一个实时响应的事件,当鼠标指针的位置发生变化时(至少移动1个像素),就会触发mousemove事件.该事件响应的灵敏度主要参考鼠标指针移动速度的快慢, ...
-
鼠标拖拉div宽度
先看效果 先进入页面 当鼠标停留在中间div时,鼠标变成双箭头 点击拖拉 往右边拉 往最左边拉 代码 <!DOCTYPE html> <html> <head> & ...
-
JS去除数组中重复值的四种方法
JS去除数组中重复值的四种方法 1 /// <summary> o[this[i]] = ""; } } newArr.p ...
-
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 ...
随机推荐
-
java多线程-锁
自 Java 5 开始,java.util.concurrent.locks 包中包含了一些锁的实现,因此你不用去实现自己的锁了.但是你仍然需要去了解怎样使用这些锁. 一个简单的锁 让我们从 java ...
-
18TH赛事管理
赛事管理者 项目psp: 一.计划 估计这个任务需要7天时间 二.开发 1.需求分析 作为一个赛事管理者,我希望知道每场比赛的队伍得分和积分情况,以便给每队进行排名. 2.生成设计文档 查询出每场得分 ...
-
Speed-BI 云平台视频观看频道
数据分析的关键,首先是要有数据进行透视分析.大家一般在使用EXCEL透视表进行数据分析时,会通过某个系统,导出类似视频中的数据底稿,然后在此基础上进行各种维度的变换与指标的改变.奥威思必得也有一个类似 ...
-
BZOJ3858: Number Transformation
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3858 题解:设第i个数为i*a;第i+1个数为(i+1)*b.则(i+1)*b>i*a; ...
-
js 性能优化整理之 缓存变量
简单的常见的操作:假设每个便签添加一个 属性 -webkit-animation-delay:0.1s 递增操作::通过for循环添加 <ul id="uls"> ...
-
【JQuery的选择器】
一.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素的id,class和标签名来查找DOM元素(在网页中id只能使用一次,class允许重复使用). 选择器 描述 ...
-
C语言_结构体变量指针做函数参数的使用案例
# include <stdio.h> # include <stdlib.h> # include <string.h> # include <malloc ...
-
pytesser3 使用说明
需要环境 Python3.x以上 需要安装PIL以及tesseract-ocr引擎.点我下载tesseract-ocr引擎 如何使用 1. pip install pytesser3 如图: [可 ...
-
2019 Power BI最Top50面试题，助你面试脱颖而出系列<;上>;
距离4月还剩11天, 你是否还在投简历找工作而机会寥寥? 你是否还在四处奔波疲于面试而结果不意? ....... 知否知否, 天下武功唯快不破, 传说江湖有本Power BI 面试真香秘籍, 能助你快 ...
- IDEA tomcat 热部署不生效的问题