JavaScript中的勻速運動和變速（緩衝）運動

個人網站

一個div的運動其實就是它與瀏覽器邊框的距離在變動。如果他變化的速率一定，那就是勻速運動；如果變化的速率不一定，那麼就是變速運動。當，變動率與聚離瀏覽器邊框的距離成比例的話，那麼就可以說是div在做緩衝運動。 
其實，很簡單，就是用一個定時器（timer），每隔一段時間來改變div聚瀏覽器邊框的距離。 

比如勻速運動： 

進入定時器：（每隔30ms做） 
if(是否到達終點) 
{ 停止定時器} 
else do{ 改變距離} 

改變距離的方法決定是勻速還是變速（緩衝）運動。 

勻速的比如： 

Javascript代碼  

1. var timer=null;  
2.   
3. function startMove()  
4. {  
5.   
6. var oDiv=document.getElementById('div1');  
7. clearInterval(timer);  
8. timer=setInterval(function () {  
9. var iSpeed=1;  
10.   
11. if(oDiv.offsetLeft>=300)  
12. {  
13. clearInterval(timer);  
14. }  
15. else  
16. {  
17. oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';  
18. }  
19. },30);  
20. };  

緩衝運動: 

Java代碼  

1. var timer=null;  
2. function startMove()  
3. {  
4. var iTarget=300;  
5.   
6. var oDiv=document.getElementById('div1');  
7.   
8. clearInterval(timer);  
9. timer=setInterval(function () {  
10. var iSpeed=(iTarget-oDiv.offsetLeft)/8;  
11.   
12. iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);  
13.   
14. iSpeed=Math.ceil(iSpeed);  
15. if(oDiv.offsetLeft==iTarget)  
16. {  
17. clearInterval(timer);  
18. }  
19. else  
20. {  
21. oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';  
22. }  
23. document.title=oDiv.style.left+' '+iSpeed;  
24. },30);  
25. };  

這樣，一個運動架構就寫好了！原理很簡單，不過還有待完善。慢慢來吧！