JS实现匀速运动的代码实例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS实现匀速运动的代码实例,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2224字,纯文字阅读大概需要4分钟。
内容图文
![JS实现匀速运动的代码实例](/upload/InfoBanner/zyjiaocheng/365/9e80a0c545934a529c5f3ed00b035fb4.jpg)
效果:
![JS实现匀速运动的代码实例 - 文章图片](/upload/getfiles/0001/2021/4/23/20210423110400871.jpg)
思路:
利用setInerval()计时器,进行运动。然后关键的一点是在最后停止的时候给它一个填充缝隙的判断。
代码:
代码如下:
<head runat="server">
<title></title>
<style type="text/css">
#div1
{
width: 100px;
height: 100px;
background: #0000FF;
position: absolute;
left: 800px;
top: 100px;
}
#div200
{
width: 1px;
height: 400px;
background: #FF0000;
position: absolute;
left: 200px;
}
#div500
{
width: 1px;
height: 400px;
background: #FF0000;
position: absolute;
left: 500px;
}
</style>
<script type="text/javascript">
function move(end) {
var oDiv = document.getElementById('div1');
var timer = null;
timer = setInterval(function () {
var speed = (end - oDiv.offsetLeft) / 5; //根据终点和offsetLeft取出运动的速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //进位取整,小数位变为整位,
// if (oDiv.offsetLeft <= end) {
// clearInterval(timer);
// }
// else {
// oDiv.style.left = oDiv.offsetLeft + speed + 'px';
// }
if (Math.abs(end - oDiv.offsetLeft) <= speed) { //由于在停止的时候最后会出现小的缝隙,或者说没有完全的到达指定地点,所以要小于它的速度
clearInterval(timer); //当距离小于速度时,让计时器停止
oDiv.style.left = end + 'px'; //在停止后填充缝隙。
}
else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px'; //移动DIV
}
}, 30)
}
</script>
</head>
<body>
<input type="button" id="btn1" value="到500的位置" onclick="move(500);" />
<input type="button" id="btn2" value="到200的位置" onclick="move(200);" />
<div id="div1">
</div>
<div id="div200">200
</div>
<div id="div500">500
</div>
</body>
内容总结
以上是互联网集市为您收集整理的JS实现匀速运动的代码实例全部内容,希望文章能够帮你解决JS实现匀速运动的代码实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。