<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>
JS模拟自由落体弹跳动画
最新推荐文章于 2024-06-08 11:15:12 发布