JavaScript如何获取鼠标移入div的方向?(代码实例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

JavaScript如何获取鼠标移入div的方向?相信有很多刚刚接触JavaScript的朋友都会有这样的疑问。本章就给大家介绍JavaScript如何获取鼠标移入div的方向。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

JavaScript如何获取鼠标移入div的方向?(代码实例)

前几天看了百度图片带有的文字标题,它会随着鼠标的移动方向载入,觉得蛮有意思,于是就想实现这么个功能。经过一番搜索和查找,找了两种实现方法。

方法一:用四个div拼成一个区域,从哪个div移入,就是从哪个方向移入。

方法二:获取鼠标移入的那个点,距离div的左右上下哪条边最近,最近的那条边就是鼠标移入的方向。

针对方法二,自己写了个小方法,代码如下,仅供参考

function getDirection(ev) {             var mx = ev.clientX,                     my = ev.clientY;             var el = this.offsetLeft,                     et = this.offsetTop,                     ew = this.clientWidth,                     eh = this.clientHeight;             var left = mx - el,                     right = el + ew - mx,                     top = my - et,                     bottom = et + eh - my;             var min = Math.min.apply(Math, [left, right, top, bottom]);             if (min === left) {                     return "left";             } else if (min === right) {                     return "right";             } else if (min === top) {                     return "top"             } else {                     return "bottom";             }     }
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » JavaScript如何获取鼠标移入div的方向?(代码实例)

发表评论

提供最优质的资源集合

立即查看 了解详情