js匀速运动停止条件
浏览数：22 /
时间：2015年06月09日
匀速运动，怎么让它到达指定位置时停止呢？
原理：
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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
