JavaScript如何获取鼠标移入div的方向?(代码实例)
程序员文章站
2022-03-09 15:38:19
...
JavaScript如何获取鼠标移入div的方向?相信有很多刚刚接触JavaScript的朋友都会有这样的疑问。本章就给大家介绍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"; } }
以上就是对JavaScript如何获取鼠标移入div的方向的全部介绍,如果您想了解更多有关JavaScript视频教程,请关注PHP中文网。
以上就是JavaScript如何获取鼠标移入div的方向?(代码实例)的详细内容,更多请关注其它相关文章!
上一篇: php文件可以直接打开吗
下一篇: 如何在jquery中设置定时刷新
推荐阅读
-
获取鼠标在div中的相对位置的实现代码_javascript技巧
-
获取鼠标在div中的相对位置的实现代码_javascript技巧
-
javascript如何实现div模块用鼠标拖动实例代码详解
-
javascript如何获取内联样式与嵌入式样式的实例代码分享
-
javascript如何获取内联样式与嵌入式样式的实例代码分享
-
dedecms页面如何获取会员状态的实例代码_javascript技巧
-
JavaScript如何获取鼠标移入div的方向
-
javascript获取鼠标位置部分的实例代码(兼容IE,FF)_javascript技巧
-
JavaScript如何获取鼠标移入div的方向?(代码实例)
-
dedecms页面如何获取会员状态的实例代码_javascript技巧