网站建设资讯

NEWS

网站建设资讯

JavaScript获取鼠标移入div方向的方法是什么-创新互联

小编给大家分享一下JavaScript获取鼠标移入div方向的方法是什么,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

创新互联公司-专业网站定制、快速模板网站建设、高性价比顺城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式顺城网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖顺城地区。费用合理售后完善,10余年实体公司更值得信赖。

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获取鼠标移入div方向的方法是什么-创新互联
当前URL:http://njwzjz.com/article/coeics.html