使用js来确定鼠标移动到元素中的方向。
最终效果这里的关键是判断鼠标进入和离开的方向。
$（礼），（MouseEnter MouseLeave
无功W = this.offsetwidth；
var H = this.offsetheight；
Var x = e.pageX - this.getBoundingClientRect ().Left - w/2;
var y = e.pagey - this.getboundingclientrect（）。顶H / 2；
无功方向= math.round（（（math.atan2（Y，X）* 180 /数学。PI）+ 180）/ 90）+ 3）% 4； / /方向值为0,1,2,3，对应上，右，左，左，分别。
风险事件类型= e.type；
VaR既= math.atan2（Y，X）/（math.pi / 180）+ 180；
$（线），Css（'transform '，'rotate（RES + 'deg））；
（（（console.log / math.atan2（Y，X）* 180 /数学。PI）+ 180））；
/ / console.log（math.round（（math.atan2（Y，X）/（math.pi / 180）+ 180）/ 90 + 3）% 4）；
var目录=新的数组（'above '，'权'，'在'，'左'）；
$（'。水库'）。文本（RES + 'deg）；
如果（事件类型= = 'mouseenter）{
$（'。水库'）。文本（目录{方向} + '进入'）；
AnimationIn（方向）；
其他{ }
$（'。水库'）。文本（目录{方向} +离开）；
AnimationOut（方向）；
}
}）；
上述代码的重点主要是计算方向的值。
math.atan2（Y，X）返回值之间的PI和PI（零下180度到180度），这是从X轴正轴角度（x，y）。这里的结果是一个弧值。你如何把这个值变成一个角度
我们可以先找出一个角度的弧度值（math.pi / 180），然后利用上述计算结果除以弧度的程度。
正如你可以看到上面的图片，当鼠标从右边，角度是45度45度之间~，底部45 ~ 135、135的~ 180-180 ~ -左侧135 - 135 - 45 ~。
因为上面的计算结果与我们的习惯不符，而负值会影响计算的正确性。现在我们把180的结果加在我们习惯的0到360个角上。当你加180时，0度在左边。
0度的位置
那么现在的范围变成了
左侧0～44～360～315。
在45到134的顶部
右边135到224
225～314底
我们继续转换，现在我们把计算的角度分为90，然后是四到五，这可以使45度成为一条分界线。
顶部的结果是1。
以上
右边的结果是2。
赖特
结果是3。
下面
结果表明，在315～0的360中，两种0～44是4。
左边
结果现在有5个值（左边2个，另一个三个），然后简化结果。我们对每个结果加3，然后是4。
左加3是3和7，然后盈余是3。
加上3是4，盈余是0。
在右边，3是5，剩下的是1。
在底部，3是6，其余的是2。
我们最后的结果是在左边的3 -左边的1 - 0的右边，然后我们可以通过控制左上角来达到这个效果。
文件
{ *
填充：0；
保证金：0；
}
HTML，
{体
宽度：100%；
身高：100%；
}
{ UL
列表样式：无；
职位：相对；
宽度：600px；
宽度：100%；
}
李{
保证金：50px汽车；
职位：相对；
宽度：300px；
身高：300px；
背景颜色：黑色；
溢出：隐藏；
}
李
位置：绝对；
宽度：300px；
身高：300px；
左：- 100%；
顶部：0；
背景颜色：红色；
文本对齐：中心；
行高：300px；
颜色：蓝色；
字体大小：150px；
}
{线。
位置：绝对；
宽度：50%；
身高：1px；
背景：红色；
权利：0；
顶部：50%；
过渡：all.3s；
转换原点：左；
}
{。水库
文本对齐：中心；
}
某人
$（礼），（MouseEnter MouseLeave
var$ = $（this）；
无功W = this.offsetwidth； / /获取元素的宽度
var H = this.offsetheight； / /获取元素的高度
功往上爬的= this.getboundingclientrect（前+文档。身体。scrollTop）； / /兼容的滚动条
var x = e.pagex - this.getboundingclientrect（左）- W / / / x 2；获取当前鼠标位置（相对于李中心）
var y = e.pagey -上-的H / Y / 2；获取当前鼠标的位置（相对于李中心）
无功方向= math.round（（（math.atan2（Y，X）* 180 /数学。PI）+ 180）/ 90）+ 3）% 4； / /方向值为0,1,2,3，对应上，右，左，左，分别。
风险事件类型= e.type；
VaR既= math.atan2（Y，X）/（math.pi / 180）+ 180；
$（线），Css（'transform '，'rotate（+物+ 'deg））；
var目录=新的数组（'above '，'权'，'在'，'左'）；
如果（事件类型= = 'mouseenter）{
$（'。水库'）。文本（目录{方向} + '进入'）；
AnimationIn（方向，为BG）；
{人}
$（'。水库'）。文本（目录{方向} +离开）；
AnimationOut（方向，为BG）；
}
}）；
功能动画（方向、ELE）{
开关（方向）{
案例0：
ele.css（{
左：0，
顶部：100%
}。动画（{
上图：0
}，300）；
打破；
案例1：
ele.css（{
左：100 %，
上图：0
}。动画（{
左：0
}，300）；
打破；
案例2：
ele.css（{
左：0，
上图：100 %
}。动画（{
上图：0
}，300）；
打破；
案例3：
ele.css（{
左：100%，
上图：0
}。动画（{
左：0
}，300）；
打破；
}
}
功能animationout（方向、ELE）{
开关（方向）{
案例0：
ele.animate（{
顶部：100%
}，300）；
打破；
案例1：
ele.animate（{
左：100 %
}，300）；
打破；
案例2：
ele.animate（{
上图：100 %
}，300）；
打破；
案例3：
ele.animate（{
左：100%
}，300）；
打破；
}
}
以上是本文的全部内容，希望本文的内容能给大家的学习或工作带来一定的帮助，同时也希望能给予更多的支持！