js匀速运动停止条件

最新推荐文章于 2019-08-05 19:55:18 发布

第八个猴子

最新推荐文章于 2019-08-05 19:55:18 发布

阅读量166

点赞数

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

版权

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

原理：

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

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

示例：匀速运动停止

html部分

<input type="button" value="100米" id="btn1" οnclick="startMove(100);" />
<input type="button" value="300米" id="btn2" οnclick="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>

转载于:https://www.cnblogs.com/huaci/p/3851931.html