使用Js判断鼠标移入元素的方向
判断鼠标从元素矩形区域的哪个方向进入的标准为:
当鼠标从元素矩形区域外移入元素矩形区域,和鼠标行动轨迹发生交叉的那条边就认为是鼠标进入的方向,例如鼠标从上方往下和上边有交叉,就认为是从上方进入。
本文要介绍几种方法来判断当鼠标滑入元素时,是从哪个方向进入;滑出元素时,从哪个方向滑出,以此对元素做一些交互效果。
求最小值
该方法是当鼠标滑入元素的时,从事件对象 e
中获取其位于文档中的坐标 (e.pageX, e.pageY)
,再计算出 x 轴方向坐标减去元素左侧距离文档左侧的距离和 x 轴方向坐标减去元素右侧距离文档左侧的距离,y 轴方向坐标减去元素顶部距离文档顶部的距离和 y 轴方向坐标减去元素底部距离文档顶部的距离,求出这四个数字的绝对值的最小值,即为鼠标进入元素的方向。