Using JavaScript to implement an object uniform/variable motion Method _ Basics

Instance 1--controls the constant movement and stopping of an object

Html:

Copy Code code as follows:

<input id= "btn" type= button "value=" Move It! "/>
<div id= "D1" >

</div>

JS: Achieve right movement

Copy Code code as follows:

var timer=null;
Window.onload=function () {
var Odiv=document.getelementbyid (' D1 ');
var Obtn=document.getelementbyid (' btn ');
Clearinterval (timer); Action See key ①
Obtn.onclick=function () {
Timer=setinterval (function () {
var speed=10;
if (odiv.offsetleft>=300) {///Judge object margin to reach specified displacement close timer
Clearinterval (timer);
}else{
odiv.style.left=odiv.offsetleft+speed+ ' px ';
}
},30);
}
}

Main points:
The condition of the ①IF statement cannot be used with the "= =" operator, such as the above code, when the speed value of the base such as 7 o'clock, the increasing left margin does not appear 300px value, but reached 294 to jump directly to 301, causing the condition is invalid, cannot stop.
② Use the Else statement is to prevent the stop move after each click button, div will move a speed.
③ before the timer, first close the timer, to prevent the continuous click of the button, while opening a number of timers, so that the move speed superimposed after faster.

Packaging:

Copy Code code as follows:

Objects: Object ID to move ITarget: horizontal offset position
var timer=null;
function MoveTo (object,itarget) {
var Obj=document.getelementbyid (object);
Clearinterval (timer);
Timer=setinterval (function () {
var speed=0;
if (obj.offsetleft<itarget) {///the Left and right direction of the object is judged by the distance from the parent and the horizontal displacement
speed=10;
}else{
speed=-10;
}
if (obj.offsetleft==itarget) {
Clearinterval (timer);
}else{
obj.style.left=obj.offsetleft+speed+ ' px ';
};
},30);
}

instance 2--modifies the encapsulated function moveto () to make the object variable speed stop

Js:

Copy Code code 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<itarget) {///by dividing the displacement by 10, the speed is decremented and the deceleration stops. Multiply by 10 to accelerate. By multiplying the numbers, controlling the speed
Speed= (Itarget-obj.offsetleft)/10;
}else{
speed=-(Obj.offsetleft-itarget)/10;
}
Speed=speed>0? Math.ceil (Speed): Math.floor (speed), to solve the problem that the last less than 1px displacement is neglected
if (obj.offsetleft==itarget) {
Clearinterval (timer);
}else{
obj.style.left=obj.offsetleft+speed+ ' px ';
};
Document.title=obj.offsetleft;
},30);
}

Main points:
① to achieve variable speed by decreasing the speed value.
② moves to the end, when the pixel is less than 1px, several values less than 1px are not added (or subtracted) to the left of the object, but are ignored, so the final displacement is a few pixels less than the set horizontal displacement position itarget. The solution is to do the rounding: positive numbers up the whole ceil (), negative numbers down the whole floor ().

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

Add 1:
Resolving speed and itarget cannot be divided evenly, resulting in the object not to reach the itarget position accurately, but in its left and right jitter problem:

Copy Code code 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<=itarget) {
speed=7;
}else{
speed=-7;
}
Sets the object to stop moving when the itarget distance from the target is less than speed, and to set the left of the object to move directly to the itarget position.
if (Math.Abs (itarget-obj.offsetleft<=speed)) {
Clearinterval (timer);
obj.style.left=itarget+ ' px ';
}else{
obj.style.left=obj.offsetleft+speed+ ' px ';
};
Document.title=obj.offsetleft;
},30);
}

Add 2:

Offset BUG: For example, offsetwidth, it contains not only the width, but also the padding and border. When you set a fill or border on an object, and then assign the offsetwidth to an object, there is a difference in movement.
WORKAROUND: Instead of offset, you can get the width attribute value of the element instead of offsetwidth by creating a function that is compatible with IE and ff. The function is as follows: GetAttr ()

Copy Code code as follows:

function GetAttr (obj,attrname) {
var Obj=document.getelementbyid (obj);
if (Obj.currentstyle) {
return Obj.currentstyle[attrname]; Compatible IE
}else{
Return getComputedStyle (Obj,false) [Attrname]; Compatible FF
}
}