原生JS实现各种运动之匀速运动
时间：2022-03-30 11:50:15|栏目：JavaScript代码|点击： 次
本文给大家分享一个用原生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>
