A detailed introduction to the constant speed and variable speed (buffer) motion in JavaScript

The movement of a div is actually a change in the distance between it and the browser border. If the variable speed is fixed, it means constant speed. If the variable speed is not fixed, it means variable speed. When the change rate is proportional to the distance from the browser's border, it can be said that the div is buffering.
In fact, it is very simple to use a timer to change the border distance of the div aggregation browser at intervals.

For example, uniform motion:

Enter the Timer: (every 30 ms)
If (whether to reach the end point)
{Stop timer}
Else do {Change distance}

The method of changing the distance determines whether the constant speed or variable speed (buffer) motion.

For example: Copy codeCode: var timer = null;
Function startMove ()
{

Var oDiv = document. getElementById ('div1 ');
ClearInterval (timer );
Timer = setInterval (function (){
Var iSpeed = 1;

If (oDiv. offsetLeft >=300)
{
ClearInterval (timer );
}
Else
{
ODiv. style. left = oDiv. offsetLeft + iSpeed + 'px ';
}
}, 30 );
};

Buffer movement: Copy codeThe Code is as follows:

Var timer = null;
Function startMove ()
{
Var iTarget = 300;

Var oDiv = document. getElementById ('div1 ');

ClearInterval (timer );
Timer = setInterval (function (){
Var iSpeed = (iTarget-oDiv.offsetLeft)/8;

ISpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed );

ISpeed = Math. ceil (iSpeed );
If (oDiv. offsetLeft = iTarget)
{
ClearInterval (timer );
}
Else
{
ODiv. style. left = oDiv. offsetLeft + iSpeed + 'px ';
}
Document. title = oDiv. style. left + ''+ iSpeed;
}, 30 );
};

In this way, a motion frame is ready! The principle is very simple, but it still needs to be improved. Come on!