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

来源：动视网责编：小采时间：2020-11-27 19:29:08

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

JavaScript如何获取鼠标移入div的方向:本篇文章给大家带来的内容是关于JavaScript如何获取鼠标移入div的方向，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。前几天看了百度图片带有的文字标题，它会随着鼠标的移动方向载入，觉得蛮有意思，于是就想实现这么个功能。经过一番搜

推荐度：

点击下载本文 文档为doc格式

导读JavaScript如何获取鼠标移入div的方向:本篇文章给大家带来的内容是关于JavaScript如何获取鼠标移入div的方向，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。前几天看了百度图片带有的文字标题，它会随着鼠标的移动方向载入，觉得蛮有意思，于是就想实现这么个功能。经过一番搜

本篇文章给大家带来的内容是关于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的方向

推荐度：

点击下载本文 文档为doc格式

标签：鼠标 js 方向

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐