JS to determine the direction in which the mouse moves into the element

The key to the final effect here is to determine which direction the mouse is entering and leaving.

$("Li"). On ("MouseEnter MouseLeave",functionE) {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 "0,1,2,3" corresponds to "top, right, bottom, left" respectively.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) + 3)% 4); var dirName = new array ( ' above ',  ' right ',  ' below ',  ' left ' ); $ ( ' deg '); if (EventType =  ' MouseEnter ') {$ ( . Res '). Text (Dirname[direction]+else{$ ( 

Demo
The above code focuses primarily on the calculation of the value of the direction
Math.atan2 (y,x) returns the value between-pi and PI (negative 180° to positive 180°), which is the angle at which the x-axis is rotated counterclockwise from the point (x, y), where the result is a radian value. So how do you turn this value into an angle?
We can first calculate the radian value of an angle (math.pi/180), and then divide the calculated result by the Radian value

As you can see, when the mouse enters from the right, the angle is at the bottom of the -45°~45° between the 45~135 left 135~180&-180~-135 the top is-135 ~ 45
Because the results calculated above do not conform to our habits, and negative values affect correctness when calculated, now we add 180 to this result and let the angle range become the 0~360° of our habits. When I add 180, 0° 's position is in the middle of the left.

0-degree position

So the scope of the present becomes
0~44 & 360~315 Left
45~134 Top
135~224 Right
225~314 below
Let's move on, now we divide the calculated angle by 90 and then round it to make 45° the dividing line.
The result from the top is 1.

Top

The result on the right is 2.

Right

The result of the calculation below is 3.

Below

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

Below

Now the results are 5 values (2 on the left, and one on the other three sides). Let's refine the results, we'll add 3 to each result, and then 4.
Add 3 to the left, then 3 and 7, then 3 after the remainder.
The top plus 3 is 4, after the remainder is 0
The right plus 3 is 5, and the remainder is 1.
The bottom plus 3 is 6, and the remainder is 2.
Our final result is 0-> top 1-> right side 2-> Bottom 3-> left then we can achieve the above effect by controlling the ieft and top

<! DOCTYPE html>
　　
JS to determine the direction in which the mouse moves into the element