Javascript simulates acceleration and deceleration motion code sharing_javascript skills

Accelerating motion means that an object moves faster and faster; decelerating motion means that an object moves slower and slower. Now use Javascript to simulate these two effects. The principle is to use setInterval or setTimeout to dynamically change the distance between one element and another element, such as xxx.style.left or xxx.style.marginLeft, and then increase the speed after each movement. In this way, the effect of accelerating motion appears, and the same is true for decelerating motion.

Here are two examples:

Accelerate movement

Copy code The code is as follows:

GO

Note: In this example, after clicking GO, the div block will accelerate to the right

Deceleration movement

Copy code The code is as follows:

GO

Note: In this example, after clicking GO, the div block will keep decelerating to the right until the speed reduces to zero, the speed becomes a negative value, and then accelerates to the left