js 등 속 운동 정지 조건

1426 단어 js
등 속 운동 은 어떻게 그것 이 지 정 된 위치 에 도 착 했 을 때 멈 추 게 합 니까?
원리:
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>


좋은 웹페이지 즐겨찾기