How to implement multi-object movement in JS (detailed tutorial)

This article mainly introduces the method of JS to realize multi-object movement. It analyzes the principles and related operation techniques of JavaScript to realize multi-object movement in detail in the form of examples. Friends in need can refer to this article

The example analyzes the method of realizing multi-object movement in JS. Share it with everyone for your reference, the details are as follows:

Basic steps

1. Get the elements for multi-object movement through getElementsByTagName
2. Then the for loop traverses the elements and adds events
3. Define the startMove function, which requires two parameters, the current "doing exercise" element, and the target value target

Note:In multi-object motion, everything cannot be shared;

Problem:

When the moving in and out speed is relatively fast , it will appear that some li cannot return to its original state and is stuck in the middle;This is because all li share a timer;

When the mouse moves into the first When a li is reached, call startMove to start a timer; when the mouse removes the li, a timer also needs to be started to return the li to its original position. When the li reaches halfway, we move into the second li, and the timer will be cleared first. At this time, the first li got stuck halfway.

Solve this problem:Let each li have its own timer to control their changes, and define it for each li during the for loop One of your own timer

liTags[i].timer = null;// 给每个li都添加一个timer

Then the timer used every time in starMove is the current li's own, so there will be no interference with each other.

The previous timer here has been changed toobj.timer(the current object’s own timer); there is no problem here.

The complete code is as follows:

Add dot style:

Complete js code

Then look at an example: multi-object movement-changing transparency

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

What are the methods to add new properties of objects to the detection sequence in vue?

How to achieve the animation effect of bouncing off the edge in jQuery?

How to use sass in vue cli webpack (detailed tutorial)

How to change the P tag text value in jQuery

By creating tags in js dynamics and setting attribute methods (detailed tutorial)

Implement the method of adding and assigning tag sub-elements in jQuery

How to implement the commonly used message box in JS?

The above is the detailed content of How to implement multi-object movement in JS (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!