JS用斜率判断鼠标进入DIV四个方向的方法
更新时间：2016年11月07日 12:00:07 作者：小_前端
在网上去搜判断鼠标移入div移入移出的方法大同小异，下面小编给大家分享一篇文章关于js判断鼠标进入div方向的代码，感兴趣的朋友一起看看吧
网上大部分判断鼠标移入div移入移出都是使用一下方法：
这个方法确实十分奇特，使用起来十分方便。
后来自己看了一些文章，看到有另一种以斜率的方法来判断鼠标的移动方向。
上图是此方法的示意图，以浏览器左上角做原点，水平轴作为x轴，往右为正；竖直轴作为y轴，向上为正。
中间的div的左上角坐标（x1,y1）,右下角坐标（x2,y2）,中心点的坐标（x0,y0）。
设如图两点的斜率为k（k<0），关于x轴对称的斜率为-k。
另外鼠标刚移入时，鼠标的坐标设为（x,y）；
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('下');
}
}
}
}
首先我们计算出了斜率k和-k，主要是通过鼠标进入div的坐标和中心点之间的斜率判断‘左右'或者‘上下'；
通过这张图可以看出，当鼠标移入点和中心点的斜率K在 k和-k 之间时，可以判断出是左右移入。所以K在其他区间内都是上下移入；
至于怎么分辨左还是右，则就通过移入点的x坐标值是否大于中心点的x0值，大于就是右移入，小于就是左移入。
上下的判断跟左右的原理一样，不过要注意y坐标都是负的，不可将大小分辨错了。
以上所述是小编给大家介绍的JS用斜率判断鼠标进入DIV四个方向的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了js中的异步获取到的数据到底能不能赋值给一个全局变量问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了javascript设置连续两次点击按钮时间间隔的方法,是非常实用的技巧,需要的朋友可以参考下2014-10-10
HTML<video>元素用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放,你也可以将<video>标签用于音频内容,在前端中实现音频和视频播放通常涉及使用HTML5的<audio>和<video>元素以及JavaScript来控制这些媒体元素的播放、暂停、音量等属性2023-10-10
eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行，本文给大家2015-12-12
解决layui的table插件无法多层级获取json数据的问题
今天小编就为大家分享一篇解决layui的table插件无法多层级获取json数据的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
今天检查自己用JQuery+AJAX+PHP做的网站后台登录检测，爱其他浏览器中兼容性还不错 结果到了火狐（FireFox）浏览器下setTimeout这个JS内置函数不执行了，本文将提供详细的解决方法2012-11-11
本文通过实例代码给大家介绍了JS实现简单滑块拼图游戏，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2019-10-10
这篇文章主要介绍了一文让你快速了解JavaScript栈，栈全称为堆栈，是一种先进后出的的数据结构，栈中只有两种基本操作，也就是插入和删除，也就是入栈和出栈操作，栈只有一端可以进行入栈和出栈操作，我们将其称为栈顶，另一端称其为栈底2022-07-07
本文给大家分享一段js代码关于动态数量的文件上传控件，代码简单易懂，非常不错具有参考借鉴价值，感兴趣的朋友一起看看2016-11-11
这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
最新评论