<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>弹性运动
</title>
<style>
#div1
{
width:100px;
height:100px;
background:red;
position:absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById("div1");
oBtn.onclick = function(){
move2(oDiv,300);
}
}
var timer = null;
var speed = 0;
function move(){
clearInterval(timer);
timer = setInterval(function(){
var oDiv = document.getElementById("div1");
speed+=(300-oDiv.offsetLeft)/5;
speed*= 0.7;
oDiv.style.left = oDiv.offsetLeft + speed +'px';
},30);
}
var iSpeed = 0;
function move2(obj,target)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
iSpeed +=(target-obj.offsetLeft)/5;
iSpeed *=0.7;
if(Math.abs(iSpeed)<1 && Math.abs(target-obj.offsetLeft)<1)
{
clearInterval(obj.timer);
}
else
{
obj.style.left = obj.offsetLeft + iSpeed +'px';
}
},30);
}
</script>
</head>
<body>
<input type="button" id="btn" value="运动" />
<div id="div1">
</div>
<div style="width:1px;height:300px;background:black;top:0px;left:300px;position:absolute;"></div>
</body>
</html>
转载于:https://www.cnblogs.com/zoro-zero/p/4341793.html
相关资源：javascript弹性运动效果简单实现方法
