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 相关文章推荐
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
vue实现前端分页完整代码
Jun 17 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原理之Session Gc的一个小概率Notice
2011/04/12 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
Javascript中的常见排序算法
2007/03/27 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
vue的全局提示框组件实例代码
2018/02/26 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
js实现电灯开关效果
2021/01/19 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
python实现简易云音乐播放器
2018/01/04 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
python 导入数据及作图的实现
2019/12/03 Python
python定义类self用法实例解析
2020/01/22 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
KTV的创业计划书范文
2014/02/02 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
小学二年级学生评语
2014/04/21 职场文书
服务口号大全
2014/06/11 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
教师自荐信范文
2015/03/06 职场文书
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers