首页 > Web开发 > 详细

js匀速运动停止条件

时间:2014-07-18 16:11:47      阅读:290      评论:0      收藏:0      [点我收藏+]

匀速运动,怎么让它到达指定位置时停止呢?

原理:

1,物体和目标的差值距离小于等于速度时,即停止

2,接着让物体移动位置等于目标位置

 

示例:匀速运动停止

html部分

<input type="button" value="100米" id="btn1" onclick="startMove(100);" />
<input type="button" value="300米" id="btn2" onclick="startMove(300);" />
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

<style>
#div1 { position:absolute; left:600px; width:100px; height:150px; background:red;}
#div2 { position:absolute; left:300px; height:800px; width:1px; background:black;}
#div3 { position:absolute; left:100px; height:800px; width:1px; background:black;}
</style>

 

js部分:

<script>

var timer = null;

function startMove(iTarget){
	var oDiv = document.getElementById("div1");
	var speed;
	
	clearInterval(timer);	
	timer = setInterval(function(){
		if(oDiv.offsetLeft<iTarget){
			speed = 7;
		} else {
			speed = -7;
		}
		
		if(Math.abs( iTarget - oDiv.offsetLeft)<= 7 ){			
			clearInterval(timer);
			oDiv.style.left = iTarget + "px";			
		} else {
			oDiv.style.left = oDiv.offsetLeft + speed + "px";
		}
	},30);

}



</script>

  

js匀速运动停止条件,布布扣,bubuko.com

js匀速运动停止条件

原文:http://www.cnblogs.com/huaci/p/3851931.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!