首页 > 代码库 > js匀速运动停止条件
js匀速运动停止条件
匀速运动，怎么让它到达指定位置时停止呢？
原理：
1,物体和目标的差值距离小于等于速度时，即停止
2,接着让物体移动位置等于目标位置
示例：匀速运动停止
html部分
<input type="button" value="http://www.mamicode.com/100米" id="btn1" onclick="startMove(100);" /><input type="button" value="http://www.mamicode.com/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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。