加
速度,即物体移动的速度越来越快的速度;慢运动,即物体运动的速度越来越慢。现在Javascript来
模拟这两种效应,其原理是利用setInterval和setTimeout动态改变一个元素与其他元素的距离,如xxx.style.left或xxx.style.marginleft,然后每次运动后能使速度增加,所以加速效应出现,慢动作的
原因是一样的。
这里有两个例子:
加速度
复制代码代码如下所示:
Javascript的加速度
*边距:0;填充:0;}
。DIV1 {宽度:100px;身高:100px;
背景:# F60的URL(qiuweiguan .webp)没有重复中心;}
函数(id){ $
返回document.getelementbyid(ID);
}
在window.onload =函数(){
VaR的OBTN = $(BTN1 );
无功odiv = $(联赛);
var定时器= null;
var速度= 0;
obtn.onclick =函数(){
ClearInterval(定时器);
定时器= setInterval(){()函数(
速度+;
odiv.style.marginleft = odiv.offsetleft +速度+PX;
},30);
}
}
注意:在这个例子中,单击后,div块将继续加速到右边的移动。
减速
复制代码代码如下所示:
Javascript的减速运动
*边距:0;填充:0;}
。DIV1 {宽度:100px;身高:100px;背景:# F60的URL(qiuweiguan .webp)没有重复中心;}
函数(id){ $
返回document.getelementbyid(ID);
}
在window.onload =函数(){
VaR的OBTN = $(BTN1 );
无功odiv = $(联赛);
var定时器= null;
var速度= 30;
obtn.onclick =函数(){
ClearInterval(定时器);
定时器= setInterval(){()函数(
速度—;
odiv.style.marginleft = odiv.offsetleft +速度+PX;
},30);
}
}
注意:在这个例子中,单击后,div块将减速到右边,直到速度降为零,速度变为负值,然后向左加速到左边。