先看一下下面这张弹性碰撞图
从图中我可以看出，球在下落过程中由于受到摩擦力的作用，能量逐渐消耗，从物理上讲，如果一个球从固定高度的高空下落，他所具备的势能为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);63px;height:56px;left:250px;background-color:red;'></div>
90 </body>
91</html>
92
源文件:/Files/jillzhang/1.rar <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(){
window.onload15
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
else50
{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);63px;height:56px;left:250px;background-color:red;'></div>90
</body>91
</html>92
经过大家提示，修改部分代码，体现了动态变化过程，望继续评论。