JavaScript Mouse following Movement 3 effects (eyeball effect, apple menu, direction following) _javascript tips

In addition to the movement of linear and curvilinear motions, there is also a movement in which the mouse follows the motion, which requires the relevant content of the trigonometric function or proportional operation. In this paper, we will introduce the relevant contents of angle motion with several small examples.

Eye rotation

In many web pages, there is a movement to follow, such as the eye rotation. When the mouse moves in the webpage, the eyeball will also rotate in the corresponding direction.

The above is a sketch of the Eye rotation (X0,Y0) is the position of the eyeball, and (x,y) is the position of the mouse. Set the angle between the line and the vertical direction is a, assuming the center point coordinates (0,0), you can get the following formula

Tan (a) = x/y = X0/y0
x0 = R*sin (a)
Y0 = R*cos (a)

In the MouseMove event, it is easy to get the mouse position (x,y), thus finding the angle of a, and then can find the position of the eyeball

Set left eye for ball1, right eye is ball2. The center coordinate of the left eye is (39,72), the center coordinate of the right eye is (106,68), the eye can move radius is 12px

<!
DOCTYPE html>  

Apple Menu

The Apple menu also has the mouse to follow the movement, with the mouse distance closer to the width of the menu items, the farther the wider, the greater the smaller

Mouse coordinates can be obtained by CLIENTX and Clienty in the MouseMove event. The coordinates of a menu item are actually known items. The distance between the mouse coordinates and the menu item is the distance that is required, and the distance is inversely proportional to the width of the menu item.

[note] The custom attribute of the element cannot be named X because X is already in use by the browser

<!
DOCTYPE html>  

Direction follows

There are many pages that have the effect of direction following. in which direction the mouse moves, the element is moved in from which direction. The direction from which the mouse moves out, and similarly, the element follows from which direction

Moving the movement effect of moving to use a uniform motion, where the main need to judge the direction

As shown in the schematic diagram, you can divide the elements of a square into (top-right, upper-left, left-up, left-down, down-right, down-left, right-up, right-down, each of these 8 parts, each part is a isosceles right-angled triangle, when the element enters an area, the direction of the front line indicates the direction of the element

Suppose the center coordinate of a square is (x0,y0), when a dynamic element (move) enters the coordinates (X,Y), the angle between the two-coordinate line and the straight line in the horizontal direction is used as the base angle, and a is assumed to be a, by determining the range of the angle A, the direction in which the dynamic element (move) is entered

When -45<a<45, the direction of entry is right
When 45<a<135, enter the direction of the upper
a>135 or a<-135, the direction of entry is left
When -135<a<-45, enter the direction for the next

After determining the direction in which the dynamic element (move) enters, it is necessary to change the dynamic element (move) to its corresponding position in accordance with the direction. Then, the dynamic Element (move) is uniformly uniform and eventually stops in the position of coincidence with the static element (test)

When dynamic element (move) moves out of the scope of a static element (test), it is noted that the Mouseout event of the static element (test) is not triggered. Because at this point the mouse is always on the dynamic element (move). So, the trigger is the Mouseout event of the dynamic element (move)

<!
DOCTYPE html>  

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.