JS判断鼠标从什么方向进入一个容器实例说明
时间：2024-04-28 09:48:35
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题。首先想到的是给容器的四个边添加几块，然后看鼠标进入的时候哪个块先监听到鼠标事件。不过这样麻烦太多了。google了一下找到了一个不错的解决方法，是基于jquery的，说实话，其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) ％ 4;这句用到的数学知识我是真没有看明白，原文中有一些英文注释我就不一一说明了。代码部分不是很多，我直接写了个示例。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>判断鼠标进入方向</title> </head> <body> <style> html,body{margin:0;padding:0;} #wrap{width:300px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;} </style> <div id="wrap"> 方向反馈 </div> <script type="text/javascript" src="http://www.niumowang.org/wp-content/themes/pizi/jquery-1.6.4.min.js"></script> <script> $("#wrap").bind("mouseenter mouseleave", function(e) { var w = $(this).width(); var h = $(this).height(); var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) ％ 4; var eventType = e.type; var dirName = new Array('上方','右侧','下方','左侧'); if(e.type == 'mouseenter'){ $(this).html(dirName[direction]+'进入'); }else{ $(this).html(dirName[direction]+'离开'); } }); </script> </body> </html>
鼠标移动到上面，可以看到效果。其中返回的direction的值为“0,1,2,3”分别对应着“上，右，下，左”
所以结果值可以switch循环
switch (direction) { case 0: $(this).html('上方进入'); break; case 1: $(this).html('右侧进入'); break; case 2: $(this).html('下方进入'); break; case 3: $(this).html('左侧进入'); break; }
原文代码是基于jquery的，后面我写了个原生的js效果，代码没有封装，给需要的朋友。由于firefox等浏览器不支持mouseenter,mouseleave事件，所以我暂时用mouseover,mouseout代替了，如果大家需要解决冒泡问题的话，还是自行搜索兼容性解决方法吧。
var wrap = document.getElementById('wrap'); var hoverDir = function(e){ var w=wrap.offsetWidth; var h=wrap.offsetHeight; var x=(e.clientX - wrap.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y=(e.clientY - wrap.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) ％ 4; var eventType = e.type; var dirName = new Array('上方','右侧','下方','左侧'); if(e.type == 'mouseover' || e.type == 'mouseenter'){ wrap.innerHTML=dirName[direction]+'进入'; }else{ wrap.innerHTML=dirName[direction]+'离开'; } } if(window.addEventListener){ wrap.addEventListener('mouseover',hoverDir,false); wrap.addEventListener('mouseout',hoverDir,false); }else if(window.attachEvent){ wrap.attachEvent('onmouseenter',hoverDir); wrap.attachEvent('onmouseleave',hoverDir); }
标签：JS判断,鼠标方向
0
投稿猜你喜欢
nodejs中的读取文件fs与文件路径path解析
2024-05-08 09:36:25
通过js获取div的background-image属性
2023-08-23 06:07:23
求英文字母或数字或下划线或汉字的js正则表达式
2009-08-04 17:59:00
JavaScript实现切换多张图片
2024-04-17 09:54:18
Bootbox将后台JSON数据填充Form表单的实例代码
2023-08-22 22:01:21
Sql Server中的非聚集索引详细介
2024-01-26 15:57:56
Python基础之赋值,浅拷贝,深拷贝的区别
2021-06-28 18:39:15
python 读取目录下csv文件并绘制曲线v111的方法
2022-08-21 16:05:34
Python异常对代码运行性能的影响实例解析
2023-10-18 23:35:39
Python基于SMTP发送邮件的方法
2021-07-17 23:42:46
教你快速掌握怎样在Windows下升级MySQL
2008-12-31 17:08:00
vue2.0自定义指令示例代码详解
2024-05-28 15:42:06
Python 3.6 读取并操作文件内容的实例
2021-11-21 16:52:14
Python面向对象之Web静态服务器
2021-09-24 07:32:25
python用什么编辑器进行项目开发
2021-04-17 19:25:20
Python爬取门户论坛评论浅谈Python未来发展方向
2021-10-26 19:09:12
linux下源码安装mysql5.6.20教程
2024-01-16 20:13:42
go解析svn log生成的xml格式的文件
2024-03-13 15:13:34
python QT界面关闭线程池的线程跟随退出完美解决方案
2023-01-01 11:56:21
如何查询Top N及Top（M―N）记录？
2009-11-11 20:03:00