源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JS判断鼠标从什么方向进入一个容器实例说明

  • 时间:2022-01-28 19:45 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JS判断鼠标从什么方向进入一个容器实例说明
[img]http://files.jb51.net/file_images/article/201302/201325150905009.png?201315151251[/img] 偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题。首先想到的是给容器的四个边添加几块,然后看鼠标进入的时候哪个块先监听到鼠标事件。不过这样麻烦太多了。google了一下找到了一个不错的解决方法,是基于jquery的,说实话,其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;这句用到的数学知识我是真没有看明白,原文中有一些英文注释我就不一一说明了。代码部分不是很多,我直接写了个示例。
[Ctrl+A 全选 注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]
鼠标移动到上面,可以看到效果。其中返回的direction的值为“0,1,2,3”分别对应着“上,右,下,左” 所以结果值可以switch循环
[Ctrl+A 全选 注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]
原文代码是基于jquery的,后面我写了个原生的js效果,代码没有封装,给需要的朋友。由于firefox等浏览器不支持mouseenter,mouseleave事件,所以我暂时用mouseover,mouseout代替了,如果大家需要解决冒泡问题的话,还是自行搜索兼容性解决方法吧。
[Ctrl+A 全选 注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部