The movement of a div is actually the changing distance between it and the browser border. If the rate of change is constant, it is uniform motion; if the rate of change is not constant, it is variable speed motion. When the rate of change is proportional to the distance from the browser border, then it can be said that the div is doing buffering movement.
Actually, it is very simple, just use a timer to change the distance between the div and the browser border every once in a while.
For example, moving at a constant speed:
Enter the timer: (do it every 30ms)
if (whether the end point is reached)
{Stop timer}
else do{Change distance}
The method of changing distance determines whether to move at a constant speed or at a variable speed (buffering).
For example:
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:
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 framework is written! The principle is simple, but it still needs to be perfected. Take your time!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
