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开发技术大全-第3章 js数据类型
Jul 03 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
JavaScript实现HSL拾色器
May 21 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
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
javascript常用方法汇总
2014/12/02 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
图解javascript作用域链
2019/05/27 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
JS实现简易计算器
2020/02/14 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
python实现的一个p2p文件传输实例
2014/06/04 Python
关于Python数据结构中字典的心得
2017/12/04 Python
python中dict使用方法详解
2019/07/17 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
自荐信如何“自荐”
2013/10/24 职场文书
大学英语专业求职信
2014/06/21 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
佛光寺导游词
2015/02/10 职场文书
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS