Example 1 - Control the uniform movement and stop of an object
HTML：
Copy the codeThe code is as follows:
<input type="button" value=" Move It ! "/>
<div >
<img src="" alt/>
</div>
JS: Implementing rightward motion
Copy the codeThe code is as follows:
var timer=null;
=function(){
var odiv=('d1');
var obtn=('btn');
clearInterval(timer); //See key points for the function①
=function(){
timer=setInterval(function(){
var speed=10;
if(>=300){ //Judge object margin and close the timer when the specified displacement is reached
clearInterval(timer);
}else{
=+speed+'px';
}
},30);
}
}
Key points:
① The conditions of the if statement cannot be used with the "==" operator. As mentioned above, when the value of speed is the base 7, the increasing left margin will not have a 300px value, but will jump directly to 301 after reaching 294, resulting in the condition being invalid and cannot be stopped.
② Use the else statement to prevent the div from moving one speed every time you click the button.
③Before the timer, turn off the timer first to prevent multiple timers from being turned on at the same time when the button is clicked continuously, so that the movement speed is faster after the superimposed.
Package:
Copy the codeThe 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=(object);
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(<itarget){ //Judge left and right displacement direction by the margin and horizontal displacement of the object from the parent
speed=10;
}else{
speed=-10;
}
if(==itarget){
clearInterval(timer);
}else{
=+speed+'px';
};
},30);
}
Example 2 - Modify the above-encapsulated function moveto() to stop the object's speed
JS：
Copy the codeThe code is as follows:
var timer=null;
function moveto(object,itarget){
var obj=(object);
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(<itarget){//Divide the displacement by 10 to reduce the speed and achieve slowdown. Multiply by 10 to speed up. By multiplication and division, control the speed and slowness
speed=()/10;
}else{
speed=-(-itarget)/10;
}
speed=speed>0?(speed):(speed);//From the problem that the displacement amount less than 1px is ignored in the end
if(==itarget){
clearInterval(timer);
}else{
=+speed+'px';
};
=;
},30);
}
Key points:
① By decreasing the speed value, speed is achieved.
② Move to the end, when the pixel is less than 1px, several values less than 1px will not be added (or subtracted) into the object left, but will be ignored, so the final displacement is several pixels less than the set horizontal displacement position itarget. The solution is to round: positive numbers are rounded up ceil() and negative numbers are rounded down floor().
Expand: The principle of vertical displacement is the same as that of horizontal displacement.
Supplement 1:
Solve the problem that speed and itarget cannot be degenerated, resulting in the object not reaching the itarget position accurately, but jittering between the left and right:
Copy the codeThe code is as follows:
var timer=null;
function moveto(object,itarget){
var obj=(object);
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(<=itarget){
speed=7;
}else{
speed=-7;
}
//Set the object stops movement when the distance from the target position is less than speed, and at the same time sets the object's left to move directly to the position of the itarget.
if((<=speed)){
clearInterval(timer);
=itarget+'px';
}else{
=+speed+'px';
};
=;
},30);
}
Supplement 2:
Bugs of offset: For example, offsetWidth, it contains not only width, but also padding and border. When a fill or border is set to the object, and then assign offsetWidth to the object, there will be differences in movement.
Solution: Instead of offset, you can create a function that is compatible with IE and FF and get the width attribute value of the element to replace offsetWidth. The function is as follows: getAttr()
Copy the codeThe code is as follows:
function getAttr(obj,attrName){
var obj=(obj);
if(){
return [attrName]; //Compatible with IE
}else{
return getComputedStyle(obj,false)[attrName]; //Compatible with FF
}
}