Methods to use JavaScript to implement constant/variable speed motion of objects_Basic knowledge

Example 1 - Controlling the uniform movement and stopping of an object

HTML:

Copy the code The code is as follows:

< ;div id="d1">
 

JS: Implement right movement

Copy code The code is as follows:

var timer=null;
window.onload=function(){
var odiv=document.getElementById('d1');
var obtn=document.getElementById('btn');
clearInterval(timer); // See the main points for its function ①
obtn.onclick=function(){
timer=setInterval(function(){
var speed=10;
        if(odiv .offsetLeft>=300){ //Close the timer when the object margin reaches the specified displacement. .offsetLeft speed 'px' ; }
}, 30);
}
}


Points: "operator, such as the above code, when the value of speed is a base number such as 7, the increasing left margin will not have a 300px value, but will jump directly to 301 after reaching 294, causing the condition to fail and unable to stop.
② Use the else statement to prevent the div from moving by a speed every time the button is clicked after stopping the movement.
③ Before the timer, turn off the timer first to prevent multiple timers from being turned on at the same time when clicking the button continuously, making the movement speed superimposed faster.

Package:

Copy code
The code is as follows:

//object: id of the object to be moved itarget: horizontal displacement position
var timer=null;
function moveto(object,itarget){
var obj=document.getElementById(object ); edge from parent Determine the left and right displacement direction based on distance and horizontal displacement
speed=10;
}else{
speed=-10;
}
If(obj.offsetLeft==itarget){
clearInterval(timer);
                                                                                                                                 30);
}



Example 2 - Modify the above encapsulated function moveto() to make the object stop at a variable speed

JS:

Copy code
The code is as follows:

var timer=null; function moveto(object,itarget){ var obj=document.getElementById(object); clearInterval(timer); timer=setInterval(function (){

var speed=0;

if(obj.offsetLeft speed=(itarget-obj.offsetLeft)/10;
}else{
speed=-(obj.offsetLeft-itarget)/10;
                                                                                                             speed>0?Math.ceil(speed):Math.floor(speed);//Rounding to solve the problem of the final displacement less than 1px being ignored
if(obj.offsetLeft==itarget){
clearInterval(timer);
                                                                                                                       document.title=obj.offsetLeft;
},30 );
}


Key points:
①Achieve speed change by decreasing the speed value.
② Move to the end, when the pixel is less than 1px, several values ​​less than 1px will not be added (or subtracted) to the object left, but will be ignored, so the final displacement is larger than the set horizontal displacement position itarget is a few pixels less. The solution is to round up: positive numbers are rounded up by ceil(), and negative numbers are rounded down by floor().

Extension: The principle of vertical displacement is the same as that of horizontal displacement.

Supplement 1:
Solve the problem that speed and itarget are not divisible, resulting in the object not accurately reaching the itarget position, but shaking around it:

Copy code The code is as follows:

var timer=null;
function moveto(object,itarget){
var obj=document.getElementById(object);
var speed=0;
If(obj.offsetLeft<=itarget) {
speed=7;
}else{
speed=-7;
}
// When the distance of itarget is less than speed, stop moving and set the object at the same time The left is moved directly to the position of itarget. itarget 'px' ;
             }else{
                                                                                                                                                                                                            .offsetLeft;
},30);
}




Supplement 2:

Bug in offset: For example, offsetWidth, which includes not only width, but also padding and border. When a padding or border is set for an object, and offsetWidth is assigned to the object, there will be a difference in movement.
Solution: Instead of using offset, create a function compatible with IE and FF to obtain the width attribute value of the element instead of offsetWidth. The function is as follows: getAttr()Copy code

The code is as follows:

function getAttr(obj, attrName){ var obj=document.getElementById(obj); if(obj.currentStyle){ return obj.currentStyle[attrName]; //Compatible with IE }else{

return getComputedStyle(obj,false)[attrName]; //Compatible with FF

}
}