运行代码 缩小
汉王
HTML代码
复制 格式化 注释 注释 清空
放大
AخA
 
1
<title></title>
2
<p>横向系数:<input id="hp" type="text" value="0.1" /> (0-1)</p>
3
<p>纵向系数:<input id="vp" type="text" value="0.6" /> (0-1)</p>
4
<p>速度:<input id="sp" type="text" value="30" />(20-1000)
5
<input type="button" value="demo" onclick="demo(document.getElementById('hp').value, document.getElementById('vp').value, document.getElementById('sp').value)" /></p>
6
<div style="margin-left:600px;">
7
    <div id="fall" style="width:30px; height:30px; background:#f90; position:relative; right:0px; bottom:40px"></div>
8
</div>
9
<script type="text/javascript">
10
var i = null;
11
function demo(hp,vp,sp) {
12
    var f=document.getElementById('fall');
13
        f.style.right='0px';
14
        f.style.bottom='40px';
15
        i&&clearInterval(i);
16
    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;
17
        i=setInterval(function(){
18
            if(f){
19
                var r=parseInt(f.style.right)+h,b=parseInt(f.style.bottom)-v;
20
                f.style.right=r+'px';
21
                f.style.bottom=b+'px';
22
                if(r>1000)clearInterval(i);
23
                if(b>-210){
24
                    v+=2
25
                } else {
26
                    h=(v>0)?v*hp:0;
27
                    v*=(v>0)?-1*vp:0
28
                }
29
            }
30
        },sp);
31
    }
32
</script>
CSS代码
复制 格式化 注释 注释 颜色 清空
放大
CSS代码...
x
 
1
JS代码
复制 格式化 注释 注释 清空
放大
JS代码...
xxxxxxxxxx
1
 
1
名称
JS模拟自由落体弹跳动画
分类
网站常用
描述
一个使用JS模拟物体自由落体及弹跳动画,有一些参数值可以设置,比如:横向系数、纵向系数、自由落体速度等,改变这些值,将获得不同的效果。
收藏