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实现类似菜单风格的TAB选项卡效果代码,通过javascript鼠标事件及页面元素遍历实现tab切换的功能,非常简单实用,需要的朋友可以参考下2015-08-08
javascript中 location用于获取或设置窗体的URL，并且可以用于解析URL，是BOM中最重要的对象之一，下面我们就来详细探讨下Location对象的使用。2015-05-05
这篇文章主要介绍了莱鸟介绍javascript onclick事件的相关资料,需要的朋友可以参考下2016-01-01
开发Chrome扩展时，页面的popup.html中需要js的时候，直接将JS写在动态绑定JS事件会提示错误，下面有个不错的解决方法，大家可以参考下2014-02-02
这篇文章主要介绍了小程序绑定用户方案优化小结，该类小程序在使用之前就需要绑定用户信息。常见于线下门店类功能性小程序。具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
下面小编就为大家带来一篇用js动态添加html元素,以及属性的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
设置选中的行样式的js代码，需要的朋友可以参考下，这里只给出了函数，具体的自己发挥。2010-05-05
这篇文章主要给大家总结介绍了关于利用JS判断客户端类型的四种方法，比如通过通过判断浏览器的userAgent、检查是否是移动端（Mobile）、ipad、iphone、微信、QQ等的方法，需要的朋友可以参考借鉴，下面2017-12-12
这篇文章主要介绍了前端localStorage清除方法的相关资料,localStorage是前端存储数据的工具,数据不会因为页面刷新而消失,但测试后需要清除数据,清除localStorage的方法包括手动清除、编程方式清除、使用浏览器提供的清除功能和使用第三方库,需要的朋友可以参考下2024-11-11
在移动web开发中和pc端不同的是，手机的输入是软键盘，这样就会有个问题，那就是当有输入的时候，键盘弹起来，整个页面难免会发生变化。怎么解决这个问题呢？下面脚本之家小编给大家分享JS解决移动web开发手机输入框弹出的问题2017-03-03
最新评论