十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
小编给大家分享一下JavaScript获取鼠标移入div方向的方法是什么,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
创新互联是一家专业提供霸州企业网站建设,专注与网站设计制作、做网站、H5高端网站建设、小程序制作等业务。10年已为霸州众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
前几天看了百度图片带有的文字标题,它会随着鼠标的移动方向载入,觉得蛮有意思,于是就想实现这么个功能。经过一番搜索和查找,找了两种实现方法。
方法一:用四个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方向的方法是什么有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!