求个JS效果，DIV浮动层顶部加速度掉下，到底部后反弹两下停留在底部。

求个JS效果，DIV浮动层顶部加速度掉下，到底部后反弹两下停留在底部10秒钟后自动消失。不想用JQ框架。想要个纯JS的脚本。谁能举个例子给个思路么分布高，但很诚意求啊类似这个效果，但是我要的是从顶部掉下。http://www.leke123.com/

解决方案 »

  1.   

    其实我自己有个思路，就是这个DIV层得CSS属性设置为 position:fixed; left:80px; bottom:0px;
    他就浮动在底部了。现在就是想通过JS去控制这个层得BOTTOM值，刚开始给他一个很大的值。给他2秒钟的时间这个值从很大加速减小到0后，再加速增大到一个比较小的值比如100就够了，然后再加速度掉到0，然后在加速到60后，又加速到0，最后加速到40后，又加速减小到0停留在那里，10秒后设置display:none;这个层就消失了就是不知道这个过程如何控制呀
      

  2.   

    反弹的过程应该是减速度改变BOTTOM值，说错了。。
      

  3.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><body>
        
        =======================
        
    <style type="text/css">
            *{padding:0;margin:0;}
            body{font-size:13px;padding:10px;}
            p{margin:2px;}
            .wrap{position:relative;width:1000px;height:550px;margin:0 auto;border:1px solid #ccc;margin-top:50px;}
            #fall{width:20px;font-size:1px;height:20px;background:#000;position:absolute;top:0;left:0;}
    </style>
        <h3>模拟重力状态下的抛物运动（假使1px==1mm）</h3>
        <p>横向初速度：<input id="Vx" type="text" value="0" />px/ms</p>
        <p>纵向初速度：<input id="Vy" type="text" value="1" />px/ms</p>
        <p>重力加速度：<input id="a" type="text" value="0.1" />px/平方ms</p>
        <p>（如果这个加速度是一个随时间变化的值，就能达到其他非匀加速运动的效果了。）</p>
        <p>单位时间：<input id="t" type="text" value="2" />（记录运动的时间间隔）
        <p><input type="button" value="演示" onclick="demo1(document.getElementById('Vx').value, document.getElementById('Vy').value, document.getElementById('a').value, document.getElementById('t').value)"/></p>
        <div class="wrap">
        <div id="fall">o</div>
        </div>    <script type="text/javascript">
        function demo1(x,y,a,t) {
            var f=document.getElementById('fall');
            var Vx=parseInt(x),
                Vy=parseInt(y),
                g=a,
                t=parseInt(t),
                h=0,l=0,Sx=0,Sy=0;
            var i=setInterval(function(){
                if(f){
                    Sx+=Vx*t;
                    l=Sx;
                    Vy+=g*t;
                    h+=Vy*t;
                    f.style.left=l+'px';
                    f.style.top=h+'px';
                    if(h>500||l>900)clearInterval(i);
                }
            },t);
        }
        </script>
    </body>
    </html>
      

  4.   

    先参考一下这个,'从天上掉下来' 
    http://www.codefans.net/jscss/code/2321.shtml
      

  5.   


    <!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 type="text/css" >
    #container{position:relative;border:1px solid red;width:800px;height:600px; border-top-width:0;}
    #m{position:absolute;left:50%;top:0;width:100px;height:50px;border:1px solid blue;}
    </style>
    </head>
    <body >
    <input type="button" onclick="startdown()" value="down" /> <input type="button" onclick="stopdown()" value="stop" />
    <div id="container">
    <div id="m"></div>
    </div>
    <script type ="text/javascript" language ="javascript" >
        var h = 550;//600-50;重物初始高
        var a = 1;//重力加速度
        var k = 0.5;//碰撞能量损失系统数
        var m = document.getElementById("m");//重物DIV
        m.v = 0;//初速度，可以试一下初速大于零（下压）和小于零（上抛）的情况
        m.y = 0; // 记录重物的下落位置,这个变量可以用parseFloat( m.sytle.top)来获得，这里设置一个变量是为了提高运行速度
        var jump = 0;//弹跳次数
        var timer; //记时器
        function startdown() {
            if (!timer) {
                timer = window.setInterval("down()",20)
           }
       }   function down() { //下落
       //先用加速度公式计算这段时间内假如没有碰到地面时，速度的增加和高度的降落
           var v2, y2; 
           v2 = m.v + a;
           y2 = (v2 * v2 - m.v * m.v) / 2 / a + m.y;        if (y2 > h) {//如果高度降落已经超出了地面，则修正为到达地面，并修正速度
               v2=Math.sqrt(2*a*(h-m.y)+m.v * m.v);
               m.y = h;
               m.v = -v2 * k; //碰撞反弹
               jump++;//
                  }
            else{
                m.v = v2;
                m.y = y2;
            }
            m.style.top = m.y + 'px';
            if ((h - m.y < 1) && Math.abs(m.v) < 1) //如果与地面距离小于1个像素，并且速度小于1,停止，如果想强制最多两次，则 || jump>2
            {stopdown();alert("共弹跳"+jump +"次,现在要消失了");m.style.display = "none"; }
       }   function stopdown() {
           if (timer) {
               window.clearInterval(timer);
               timer = null;
            }
       }
        
    </script>
     
    </body></html> 
      

  6.   

    weilf的这个是近似，没有用到真正的加速公式，因为是认为单位时间内是匀速的， var i=setInterval(function(){
                if(f){
                    Sx+=Vx*t;
                    l=Sx;
                    Vy+=g*t;
                    h+=Vy*t;
                    f.style.left=l+'px';
                    f.style.top=h+'px';加速公式是mgh=m(v2*v2-v1*v1)* 1/2
     
    变形后就是我这样写的y2 = (v2 * v2 - m.v * m.v) / 2 / a + m.y;