本文给大家分享一个用原生JS实现的匀速运动，效果如下：
需要注意的是，这种运动效果在实际的开发中用的比较少，用的更多的还是弹性运动和缓冲运动，以下是代码实现，欢迎大家复制粘贴及吐槽。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现各种运动之匀速运动</title>
<style>
#div1 {
width: 100px;
height: 100px;
position: absolute;
background: red;
left: 0;
top: 50px;
}
span {
width: 1px;
height: 300px;
background: black;
position: absolute;
left: 300px;
top: 0;
}
;
</style>
<script type="text/javascript">
var timer = null;
function startMove(iTarget) {
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function () {
var iSpeed = 0;
if (oDiv.offsetLeft < iTarget) {
iSpeed = 7;
} else {
iSpeed = -7;
}
//是否到达终点
if (Math.abs(oDiv.offsetLeft - iTarget) < 7) {
//到达终点
clearInterval(timer);
oDiv.style.left = iTarget + 'px';
} else {
//到达之前
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove(300)" />
<div id="div1"></div>
<span></span>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- js指定步长实现单方向匀速运动
- 原生javascript实现匀速运动动画效果
- javascript匀速运动实现方法分析
- 浅谈Javascript中匀速运动的停止条件
- 浅谈Javascript如何实现匀速运动
- JS实现匀速运动的代码实例
- JS匀速运动演示示例代码
- JavaScript中的匀速运动和变速(缓冲)运动详细介绍
本文由 华域联盟 原创撰写：华域联盟 » 原生JS实现各种运动之匀速运动
转载请保留出处和原文链接：https://www.cnhackhy.com/80337.htm
