JavaScript如何取得鼠标移入div的方向1

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

本篇文章给大家带来的内容是关于JavaScript如何获取鼠标移入div的方向，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

微信截图_20181110150634.png

方法一：用四个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中文网其它相关文章！