模拟加速和减速代码共享

模拟加速和减速代码共享
速度,即物体移动的速度越来越快的速度;慢运动,即物体运动的速度越来越慢。现在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块将减速到右边,直到速度降为零,速度变为负值,然后向左加速到左边。
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部