JS判断鼠标从什么方向进入一个容器实例说明
更新时间：2013年02月05日 15:20:49 作者：
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题,并且做了一系列的设想，代码部分不是很多，我直接写了个示例， 感兴趣的朋友可以了解下，或许本文对你有所帮助
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题。首先想到的是给容器的四个边添加几块，然后看鼠标进入的时候哪个块先监听到鼠标事件。不过这样麻烦太多了。google了一下找到了一个不错的解决方法，是基于jquery的，说实话，其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;这句用到的数学知识我是真没有看明白，原文中有一些英文注释我就不一一说明了。代码部分不是很多，我直接写了个示例。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
鼠标移动到上面，可以看到效果。其中返回的direction的值为“0,1,2,3”分别对应着“上，右，下，左”
所以结果值可以switch循环
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
原文代码是基于jquery的，后面我写了个原生的js效果，代码没有封装，给需要的朋友。由于firefox等浏览器不支持mouseenter,mouseleave事件，所以我暂时用mouseover,mouseout代替了，如果大家需要解决冒泡问题的话，还是自行搜索兼容性解决方法吧。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
相关文章
这篇文章主要介绍了Js实现网页键盘控制翻页的方法,较为详细的分析了Js实现网页键盘控制翻页的原理与具体实现方法,非常具有实用价值,需要的朋友可以参考下2014-10-10
这篇文章主要为大家详细介绍了微信小程序手动添加收货地址省市区联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要为大家详细介绍了JS实现贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
非常酷的javascript拖动分页功能，无缝循环分页，拖动鼠标即可完成分页，鼠标向左拖动回到前一页，向右拖动则翻开第二页，还带有动画特效，着实很不错，界面黑色，非主流风格，相信很多人会喜欢的。2015-05-05
这篇文章主要介绍了微信小程序自定义组件封装及父子间组件传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
本文给大家介绍JS实时弹出新消息提示框并有提示音响起的实现代码，实现过程除了使用及时的推送技术外还使用ajax实现此功能，对js提示框提示音响起的相关知识感兴趣的朋友一起学习吧2016-04-04
本篇文章主要介绍了微信小程序scroll-view实现横向滚动和上拉加载示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
这篇文章主要介绍了JS+CSS实现闪烁字体效果代码,可实现文字按照指定颜色逐次闪烁显示的功能,代码非常简单实用,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了JavaScript简单下拉菜单,采用JavaScript定时函数递归调用实现菜单渐显效果,非常简单实用,需要的朋友可以参考下2015-09-09
这篇文章主要为大家详细介绍了vue/js实现页面自动往上滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论