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

weilf 2012-04-12 09:59:06

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

不想用JQ框架。想要个纯JS的脚本。谁能举个例子给个思路么。。。分布高，但很诚意求啊。。。

类似这个效果，但是我要的是从顶部掉下。http://www.leke123.com/

...全文

491 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

wzhiyuan 2012-04-12

打赏
举报

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;

wzhiyuan 2012-04-12

打赏
举报



<!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>

whdrs 2012-04-12

打赏
举报

这个不真不知道。。

Z_Lacey 2012-04-12

打赏
举报

先参考一下这个,'从天上掉下来'

http://www.codefans.net/jscss/code/2321.shtml

weilf 2012-04-12

打赏
举报

<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>

weilf 2012-04-12

打赏
举报

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

weilf 2012-04-12

打赏
举报

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

就是不知道这个过程如何控制呀。。。