码迷,mamicode.com
首页 > Web开发 > 详细

js匀速运动停止条件

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

标签:style   blog   os   width   art   io   

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

原理:

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匀速运动停止条件

标签:style   blog   os   width   art   io   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!