Using JS to judge the direction of the mouse moving into elements _javascript skills

Final effect

The key here is to determine the direction in which the mouse enters and leaves.

 $ ("Li"). On ("MouseEnter MouseLeave", function (e) {var w = this.offsetwidth;
   var h = this.offsetheight;
   var x = E.pagex-this.getboundingclientrect (). LEFT-W/2;
   var y = E.pagey-this.getboundingclientrect (). Top-h/2; var direction = Math.Round (((Math.atan2 (y, x) * 180/math.pi) + 180)/90) + 3)% 4;
   The value of direction is "0,1,2,3" respectively corresponding to "up, right, down, left" var eventtype = E.type;
   var res = math.atan2 (y, x)/(math.pi/180) + 180;
   $ ('. Line '). CSS (' transform ', ' rotate (' + res + ' deg) ');
   Console.log (((Math.atan2 (y, x) * 180/math.pi) + 180));
   Console.log (Math.Round (math.atan2 (y, x)/(math.pi/180) + 180)/90 + 3)% 4);
    var dirname = new Array (' above ', ' right ', ' below ', ' left ');
   $ ('. Res '). Text (res + ' deg ');
    if (EventType = = ' MouseEnter ') {$ ('. Res '). Text (dirname[direction]+ ' enter ');
   Animationin (direction);
    }else{$ ('. Res '). Text (dirname[direction]+ ' leave ');
   Animationout (direction); 
}
  });

The main point of the code above is the calculation of the value of the direction

Math.atan2 (y,x) returns the value between-pi and PI (minus 180° to positive 180°), the angle that is passed when the x-axis is rotated from a positive counterclockwise point (x,y). The result here is a radian value. So how do you convert this value to an angle?

We can calculate the radian value of an angle (math.pi/180), and then divide the calculated result by the value of the first radian.

As you can see from the picture above, when the mouse enters from the right, the angle is between the -45°~45° the bottom is 45~135 left 135~180&-180~-135 the top is-135 ~-45

Because the calculated results above do not conform to our habits, and negative values affect correctness at the time of calculation, we now add a 180 to this result to turn the angle range into our habitual 0~360°. When you add 180, 0° 's position is in the middle of the left.

0-degree position

So now the range has become

0~44 & 360~315 Left

45~134 Top

135~224 Right

Below 225~314

Let's move on, now we divide the calculated angle by 90 and then round it so that 45° can be the dividing line.

The result of the above calculation is 1.

Top

On the right, the result is 2.

Right

The result below is 3.

Below

On the left, there are two types of 0~44 that are definitely 0 315~360 4.

Left

The result is now 5 values (2 on the left, one for the other three). Let's streamline the results and we'll add 3 to each result and then 4.

The left plus 3 is 3 and 7, then the remainder is 3.

The top plus 3 is 4, and the remainder is 0.

3 to the right plus 5 to 1.

The bottom plus 3 is 6, and the remainder is 2.

Our final result is 0-> the upper 1-> right 2-> the bottom 3-> the left and then we can achieve the effect by controlling the left-hand and top.

<! 
  DOCTYPE html>  

Above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!