Detailed explanation of JS uniform motion examples

This article mainly shares with you detailed examples of JS uniform motion. I hope it can help you. Let us first introduce the basic principles of JS motion to you.

Basic principles of JS movement:

To make p move, the key is to modify the coordinates of the object,

op.style.left=offsetLeft+speed+'px';

But This can only be moved once. We can use the timer to make this operation 'move'.

setInterval(funtion(){
op.style.left=offsetLeft+speed+'px'; （speed是每次移动的像素）
},30)

This way you can exercise, but the effect is not what we need. The source code is as follows:

To stop a moving object: the key is to determine the size of offsetLeft and turn off the timer;

var timer=null;
time=setInterval(function(){
                     if(op.offsetLeft>=300){
clearInterval(timer);
                         }else{
op.style.left=op.offsetLeft+10+‘px’；}
},30)这样还是有小瑕疵，就是多次点击造成的BUG，解决方法就是关闭上次的定时器：多加个clearInterval(timer)

Related Recommendation:

How to create a universal uniform motion framework

Explanation of uniform motion based on js

JavaScript Detailed introduction to uniform speed motion and variable speed (buffer) motion in _Basic knowledge

The above is the detailed content of Detailed explanation of JS uniform motion examples. For more information, please follow other related articles on the PHP Chinese website!