JS用斜率判断鼠标进入DIV四个方向的方法


Posted in Javascript onNovember 07, 2016

网上大部分判断鼠标移入div移入移出都是使用一下方法:

这个方法确实十分奇特,使用起来十分方便。

后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向。

JS用斜率判断鼠标进入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的坐标和中心点之间的斜率判断‘左右'或者‘上下';

JS用斜率判断鼠标进入DIV四个方向的方法

通过这张图可以看出,当鼠标移入点和中心点的斜率K在 k和-k 之间时,可以判断出是左右移入。所以K在其他区间内都是上下移入;

至于怎么分辨左还是右,则就通过移入点的x坐标值是否大于中心点的x0值,大于就是右移入,小于就是左移入。

上下的判断跟左右的原理一样,不过要注意y坐标都是负的,不可将大小分辨错了。

以上所述是小编给大家介绍的JS用斜率判断鼠标进入DIV四个方向的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
几款极品的javascript压缩混淆工具
May 16 Javascript
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
js模糊查询实例分享
Dec 26 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
JavaScript手风琴页面制作
May 17 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 #Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 #Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 #Javascript
jQuery插件WebUploader实现文件上传
Nov 07 #Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 #Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 #Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 #Javascript
You might like
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
javascript String 对象
2008/04/25 Javascript
JS 有名函数表达式全面解析
2010/03/19 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
js 调用百度分享功能
2017/02/27 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python中扩展包的安装方法详解
2017/06/14 Python
Numpy之random函数使用学习
2019/01/29 Python
python实现维吉尼亚加密法
2019/03/20 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
2014年护士工作总结范文
2014/11/11 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
公司管理制度范本
2015/08/03 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
MySQL分区路径子分区再分区
2022/04/13 MySQL