基于弹性碰撞原理的抖动式窗口

先看一下下面这张弹性碰撞图

从图中我可以看出，球在下落过程中由于受到摩擦力的作用，能量逐渐消耗，从物理上讲，如果一个球从固定高度的高空下落，他所具备的势能为1/2gh*h，好像是亚，但是在下落过程中，这些能量会逐步消耗在克服摩擦力上，下落过程中的受力图示为：
由于能量逐渐消耗，弹球每次弹起高度会有所降低，因此有拉锯式的下落过程。很有节奏感。
如果将上面的原理应用到窗口中就可以产生很炫的抖动效果，您的窗口可能就会与众不同。下面就谈一下如何实现这个非常有个性的窗口。
我们可以将浏览器的四周边缘看作地面，将浮动div图层当作弹球，它从从离某个边缘处一定距离的位置开始接近边缘，当图层某个点碰到边缘的时候，认为产生一次弹性碰撞。当然每次接近或者远离边缘都可以用一个定时器来触发。直到往复固定次数或者当回弹得高度小于固定值得时候，认为图层能量耗尽。才可以正常停靠。
下面是实现代码:

 1<html>
 2    <head>
 3    <script language='javascript'>
 4    var qiu;
 5    var high;
 6    var speed=0;
 7    var stillHigh=2;
 8    var downInterval;
 9    var upInterval;
10    var nl;
11    var haosun=2500;
12    var timeout=10;
13    var haosunrate = 0;
14    window.onload=function(){
15      qiu = document.getElementById('qiu');
16      high = qiu.style.pixelLeft;
17      nl = Math.ceil(high*high*10/2);     
18      downInterval = window.setInterval("down()",timeout);
19    }
20    function down()
21    {  
22       speed+=Math.ceil(timeout*10/1000);   
23       if(high>0)
24       {
25           high=qiu.style.pixelLeft-speed;
26           qiu.style.pixelLeft = high;               
27       }
28       else if(high<0)
29       {
30          high=0;      
31          qiu.style.pixelLeft=0;    
32       }
33       else if(high==0)
34       {           
35            //落地了,准备弹起，当发现能量能支持的高度超过stillHigh，就可以再次弹起
36            haosun+=haosunrate;
37            if(haosunrate>0)
38            {
39                haosunrate+=80;                
40            }     
41            nl=nl-haosun;          
42            var h =Math.ceil(Math.sqrt(Math.round(2*nl/10)));                     
43            if(h>stillHigh)
44            {
45                //弹起                
46                window.clearInterval(downInterval);
47                upInterval = window.setInterval("up()",timeout);
48            }
49            else
50            {
51                //全部结束                                  
52                end();                
53            }
54       }  
55    }    
56    function up()
57    {
58       speed-=Math.ceil(timeout*10/1000);          
59       var h =Math.ceil( Math.sqrt(Math.round(2*nl/10)));           
60       if(high<h)
61       {
62          high = qiu.style.pixelLeft+speed;
63          qiu.style.pixelLeft = high;
64       }
65       else if(high>h)
66       {
67          //超过了，则要降到最高点
68          high=h;
69          qiu.style.pixelLeft=h;
70       }
71       if(high==h)
72       {
73          //弹到了最高点
74          window.clearInterval(upInterval);    
75          haosun+=haosunrate;         
76          nl-=haosun;         
77          downInterval = window.setInterval("down()",timeout);      
78       }      
79    }
80    function end()
81    {
82       window.clearInterval(downInterval);
83       window.clearInterval(upInterval);
84       qiu.style.pixelStyle = 0;
85    }
86    </script>
87    </head>
88    <body>
89        <div id='qiu' style='position:absolute;background-image:url(qiu.jpg);width:63px;height:56px;left:250px;background-color:red;'></div>
90    </body>
91</html>
92
源文件:/Files/jillzhang/1.rar
经过大家提示，修改部分代码，体现了动态变化过程，望继续评论。
posted @ 2007-03-06 17:37  Robin Zhang  阅读(5005)  评论(37)  编辑  收藏  举报