运动基础 学习笔记

http://bbs.zhinengshe.com/thread-1194-1-1.html

 

运行效果：[http://runjs.cn/code/riwpoev9]

 

问题1：不会在特定的位置停止 ~

解决方案：添加if判断条件，达到特定位置时关闭定时器 ;

运行效果：[http://runjs.cn/code/aoznxlv9] ;

 

问题2：如何改变物体运动速度 ？

（1）不可行方案：修改定时器间隔为300ms ;

　　     存在问题：物体运动卡顿 ;

           运行效果：[http://runjs.cn/code/x4akoomk]

（2）解决方案：修改oDiv.style.left = oDiv.offsetLeft + 10 + "px" 中的 10 ;

　　  运行效果：[http://runjs.cn/code/x8mtz0vr]

 

问题3：物体运动到终点后，点击按钮，物体仍然会运动 ~

原因：这里虽然在offsetLeft>=300时clearInterval，但是setInterval()仍然会被执行一次；

setInterval(function () {
    if (oDiv.offsetLeft >= 300) {
        clearInterval(timer);
    }
    oDiv.style.left = oDiv.offsetLeft + speed + "px";
}, 30);

解决方案：添加else从句；

运行效果：[http://runjs.cn/code/ewbl7uzy]

 

问题4：物体运动过程中，连续点击按钮会叠加定时器 ~

解决方案：在打开定时器前关闭之前的定时器，保证每次只有一个定时器在工作 ；

运行效果：[http://runjs.cn/code/i89ybgtc]

 

问题5：匀速运动物体来回抖动

解决方案：当abs(iTarget-oDiv.offsetLeft)<speed时，关闭定时器，并让oDiv.style.left=iTarget+"px";

运行效果：[here]