本篇文章给大家带来的内容是关于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教程,请关注亿速云。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。