首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

求个JS效果,DIV浮动层顶部加速度掉下,到底部后反弹两下停留在底部。该如何解决

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

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

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

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

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

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

热点排行