首页 > 代码库 > 运动基础

运动基础

运动基础

示例:点击按钮,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);}