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定时器
Nov 17 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
理解JS事件循环
Jan 07 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
vue实现记事本功能
Jun 26 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 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中如何调用用户自定义函数
2013/08/06 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
Python @property及getter setter原理详解
2020/03/31 Python
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
师范生的个人求职信范文
2014/01/04 职场文书
中层竞聘演讲稿
2014/01/09 职场文书
公务员个人年终总结
2015/02/12 职场文书
二年级数学教学反思
2016/02/16 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server