弹性运动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹性运动相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1{width: 100px; height: 100px; background: red; position: absolute; top: 50px; left: 0px;}
</style>
<script type="text/javascript">
var iSpeed=0;
var timer=null;
var left=0;
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
/*
if(oDiv.offsetLeft<300){
iSpeed+=(300-oDiv.offsetLeft)/50;
}else {
iSpeed-=(oDiv.offsetLeft-300)/50;
}*/
//因为if里边的判断可以化简，所有为
iSpeed+=(iTarget-obj.offsetLeft)/5;
iSpeed*=0.7; //乘以小数，让时间慢慢变小
left+=iSpeed; //引入一个外部变量将误差每次累计起来
if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ //当速度的绝对值小于1 并且 边距和目标的差小于1时 就停止
clearInterval(obj.timer);
obj.style.left=iTarget+‘px‘; //停止定时器 并手动移动到指定的位置
}else{
obj.style.left=left+‘px‘;
}
},30);
};
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove(document.getElementById(‘div1‘),‘300‘)" />
<div id="div1"></div>
<div style="position: absolute; width: 1px; height: 300px; left: 300px; top:0; background: black;"></div>
</body>
</html>
以上是关于弹性运动的主要内容，如果未能解决你的问题，请参考以下文章