JS模拟自由落体弹跳动画

<title></title>
<p>横向系数：<input id="hp" type="text" value="0.1" /> (0-1)</p>
<p>纵向系数：<input id="vp" type="text" value="0.6" /> (0-1)</p>
<p>速度：<input id="sp" type="text" value="30" />(20-1000)
<input type="button" value="demo" onclick="demo(document.getElementById('hp').value, document.getElementById('vp').value, document.getElementById('sp').value)" /></p>
<div style="margin-left:600px;">
	<div id="fall" style="width:30px; height:30px; background:#f90; position:relative; right:0px; bottom:40px"></div>
</div>
<script type="text/javascript">
var i = null;
function demo(hp,vp,sp) {
	var f=document.getElementById('fall');
		f.style.right='0px';
		f.style.bottom='40px';
		i&&clearInterval(i);
	var h=1,v=1,hp=(hp>0&&hp<1)?hp:0.2,vp=(vp>0&&vp<1)?vp:0.5,sp=(sp>20 || sp<1000)?sp:30;
		i=setInterval(function(){
			if(f){
				var r=parseInt(f.style.right)+h,b=parseInt(f.style.bottom)-v;
				f.style.right=r+'px';
				f.style.bottom=b+'px';
				if(r>1000)clearInterval(i);
				if(b>-210){
					v+=2
				} else {
					h=(v>0)?v*hp:0;
					v*=(v>0)?-1*vp:0
				}
			}
		},sp);
	}
</script>

延伸阅读

---

▶ Walkthrough007