标签:
<!DOCTYPE html> | |
<html> | |
<head lang="en"> | |
<meta charset="UTF-8"> | |
<style type="text/css"> | |
#box{width:100px;height:100px;background:red;position: absolute;left:0;} | |
span{height:900px;border-left:1px red solid;position: absolute;left:500px;} | |
</style> | |
<title></title> | |
<script type="text/javascript"> | |
window.onload=function() | |
{ | |
var oInput=document.getElementById("input1"); | |
var oDiv=document.getElementById("box"); | |
var timer=null; | |
oInput.onclick=function() | |
{ | |
startMove(); | |
}; | |
function startMove() | |
{ | |
clearInterval(timer); | |
var iSpeed=0; | |
timer=setInterval(function() | |
{ | |
iSpeed+=(500-oDiv.offsetLeft)/50;//弹性运动 | |
iSpeed*=0.95;//摩擦力 | |
oDiv.style.left=oDiv.offsetLeft+iSpeed+"px"; | |
},30) | |
} | |
} | |
</script> | |
</head> | |
<body> | |
<input type="button" value="开始运动" id="input1"/> | |
<div id="box"></div> | |
<span></span> | |
</body> | |
</html> |
标签:
原文地址:http://blog.csdn.net/xiaomogg/article/details/45306739