用JS判断鼠标移动到元素的方向

最终效果

这里的关键是判断鼠标从哪个方向进出

$('li ')。on('mouseenter mouseleave '，函数(e){ var w=this . offset with；var h=this.offsetHeightvar x=e . page x-this . getboundingclientrect()。左-w/2；var y=e . pagey-this . getboundingclientrect()。top-h/2；var方向=Math.round((((Math.atan2(y，x) * 180/Math。PI)180)/90)3)% 4；//direction的值为“0，1，2，3”，对应“上、右、下、左”var eventType=e.typevar res=Math.atan2(y，x)/(Math。PI/180)180；$('.行')。css('transform '，' rotate(' RES ' deg '))；//console.log(((Math.atan2(y，x) * 180/Math。PI)180))；//console . log(Math . round)((Math . atan 2(y，x))/(Math。PI/180)180)/90 3)% 4)；Var dirName=新数组('顶部'，'右侧'，'底部'，'左侧')；$('.RES’)。文本(RES ' deg ')；If(事件类型==' mouseenter') {$(')。RES’)。文本(dirname[direction]' enter ')；动画(方向)；} else {$('。RES’)。文本(dirname[direction]' leave ')；动画输出(方向)；} });以上代码的重点主要是方向值的计算

Math.atan2(y，x)返回-PI和PI之间的值(负180到正180)，这是从x轴逆时针旋转到点(x，y)时的通过角度。这里的结果是一个弧度值。那么如何将这个值转换成一个角度呢

我们可以先计算一个角度的弧度值(Math。PI/180)，然后将上面计算的结果除以1度的弧度值

从上图可以看出，鼠标从右侧进入时，角度在-45 ~ 45之间，底部为45 ~ 135，左侧为135 ~ 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

较低的地方

左边计算的结果有两种：0~44一定是0，315~360是4

左边的

计算结果中有五个值(左侧两个，其他三个面各一个)。让我们再次简化结果。我们给每个结果加3，然后用4取余数

左边加3后，有3和7，然后取剩下的，就是3

上面加3后是4，取剩下的是0

右边加3等于5，剩下的等于1

把下面的3加到6，剩下的作为2

我们最终的结果是0-上1-右2-下3-左，然后我们可以通过控制左和上来达到上面的效果

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title style type=' text/CSS ' * { padd : 0；保证金： 0；} html，正文{宽度： 100%；高度： 100%;} ul { list-style :无；相对位置：宽度： 600像素；宽度： 100%;} ul li { margin: 50px auto相对位置：宽度： 300像素；高度： 300像素背景-颜色：黑色；飞越：隐藏；} ul li .bg {位置：绝对值；宽度： 300像素；高度： 300像素左侧：-100%;top : 0；背景-颜色：红色；文本对齐：中心；线高： 300像素；颜色：蓝色；font-size : 150 px} .线{位置：绝对值；宽度： 50%;高度： 1px背景：红色；右： 0；前：名50%；transit : all . 3 transform-origin :左侧；} .RES { text-align :居中；}/style/head body ul Li div class=' BG ' SB/div/Li/ul div class=' RES '/div script src=' http : js/jquery-3。1 .1 .js '/script script $(' Li ').on('mouseenter mouseleave '，函数(e) { var $bg=$(this).查找('。BG’)；var w=this.offsetWidth//获取元素宽度var h=this.offsetHeight//获取元素高度var ToToP=this。GetBoundingClientRect().顶级文档。尸体。滚动顶部；//兼容滚动条var x=e .第x页-这个。getboundingclientrect().左-w/2；//获取当前鼠标的x轴位置（相对于这个里的中心点)var y=e . Pagey-ToToP-h/2；////获取当前鼠标的y轴位置（相对于这个里的中心点)var方向=数学。圆((((数学。atan 2(y，x) * 180 /数学.PI)180)/90)3)% 4；//方向的值为"0,1,2,3"分别对应着"上，右，下，左" var EventType=e . TYPevar res=Math.atan2(y，x)/(Math .PI/180)180；$('.行')。css('变换'，'旋转'(' RES ' deg '))；var dirName=新数组('上方', '右侧', '下方', '左侧');if(eventType=='mouseenter') { $(').RES ').文本(DirName[方向]'进入');animationIn(方向，$ BG)；} else { $(' .RES ').文本(DirName[方向]'离开');动画输出(方向，$ BG)；} });函数动画在(方向，元素){开关(方向){案例0:元素。CSS({左： 0，顶： '-100%' }).动画({ top: 0 }，300)；打破；案例1: ele.css({ left: '100% '，top: 0 })。动画({ left: 0 }，300)；打破；案例2: ele.css({ left: 0，top: '100%' })。动画({ top: 0 }，300)；打破；案例3: ele.css({ left: '-100% '，top: 0 })。动画({ left: 0 }，300)；打破；} }函数动画输出(方向，元素){开关(方向){案例0:元素。动画({ top : '-100% ' }，300)；打破；案例1: ele。动画({左： ' 100% ' }，300)；打破；案例2: ele。动画({ top : ' 100% ' }，300)；打破；第：号案件。动画({ left : '-100% ' }，300)；打破；} }/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！