原生JS实现各种运动之匀速运动
作者：aiguangyuan
这篇文章主要为大家详细介绍了原生JS实现各种运动之匀速运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文给大家分享一个用原生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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。