首页 > 代码库 > 运动基础
运动基础
运动基础
示例:点击按钮,Div开始移动,当到达特定位置时,停止运动
1,运动的要素是什么 比如 position:absolute; left:0px,改变left使其运动
2,让“物体”持续性的运动,依靠什么 定时器 setInterval()
3,停止的条件是什么 比如offsetLeft==300时,停止运动 要点:关闭定时器
Bug: (1),速度不是距离倍数时,运动过界 如速度为7时,它就是301,它就继续运动下去 解决:>=300 (2),运动停止时,继续点击按钮,物体继续运动 解决:把运动和停止隔开(if/else) (3),当Div在运动过程中,继续点击按钮,速度会变快 如速度为1时,试试看 原因:每点击一次,就开了一个定时器。比如5个定时器,就相当于5倍的速度 解决:运动开始前,清空定时器 clearInterval()
--------------------------------------------------------------------
总结
运动框架原则: 1,开始运动前,关闭原来的定时器 注:对应上面第3个bug 2,把运动和停止隔开(if/else) 注:对应上面第2个bug
----------------------------------------------------------------------
示例代码:
html
<input type="button" value="http://www.mamicode.com/开始移动" id="btn1" onclick="startMove();" />
<div id="div1"></div>
js
var timer = null;function startMove(){ var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ if(oDiv.offsetLeft >= 300){ clearInterval(timer); } else { oDiv.style.left = oDiv.offsetLeft + 1 + "px"; } },30);}