javascript实现匀速运动的方法分析

本文介绍了实现javascript匀速运动的方法,供大家参考,如下:

匀速运动步:

1。清除定时器

2。打开定时器

三.运动是否完成:A、动作完成、间隙的计时器;B、运动未完成。

不断运动的停止条件:距离是足够接近Math.abs(当然距离目标的距离)小于最小移动距离

运行效果的截图如下:



div匀速运动的一个例子(简单运动):






Javascript的匀速运动

# DIV1 {宽度:100px;身高:100px;背景:红色;位置:绝对;顶部:50px;左:500px;}
跨{宽度:1px;身高:300px;背景:黑色;位置:绝对;左:300px;最高:0;显示:块;}


在window.onload =功能()
{
VaR的OBTN = document.getelementbyid('btn1);
无功odiv = document.getelementbyid('div1);
obtn.onclick =功能()
{
startmove(odiv,300);
};
};
var定时器= null;
功能startmove(目标、指标)
{
ClearInterval(定时器);
定时器= setInterval(){()函数(
VaR迈跃= 0;
如果(obj.offsetleft <指标)
{
迈跃= 7;
}
其他的
{
迈跃= - 7;
}
如果(Math.abs(obj.offsetleft -指标)<7)
{
ClearInterval(定时器);
obj.style.left =指标+ 'px;
}
其他的
{
obj.style.left = obj.offsetleft +迈跃+ 'px;
}
},30);
}



移动








更多关于javascript运动效果相关内容的站点参见:javascript运动效果和技巧摘要

希望本文能对javascript程序设计有所帮助。