【网页插件】热气球漂浮的效果

热气球运动效果大致实现细节如下：

 1 /*
 2 /*
 3 @function 热气球移动
 4 @update by julying , 2012/7/25
 5 */
 6 function airBalloon(balloon){
 7     var viewSize = [] , viewWidth = 0 , viewHeight = 0 ;
 8     resize();    
 9     $(balloon).each(function(){
10         //首先对热气球进行随机定位
11         $(this).css({
12             //初始 top 取随机值
13             top: rand(40, viewHeight * 0.5 ) , 
14             left : rand( 10 , viewWidth - $(this).width() )
15         });
16         fly(this);
17     });
18     // 当浏览器窗口变化时候，重新计算热气球的坐标    
19     $(window).resize(function(){
20         resize()
21         $(balloon).each(function(){
22             //取消之前的动画事件，重新定义移动方式
23             $(this).stop().animate(
24                 {top: rand(40, viewHeight * 0.5 ) , 
25                 left : rand( 10 , viewWidth - $(this).width())} ,
26                 1000 , 
27                 function(){
28                     fly(this);
29                 }
30             );
31         });
32     });
33     //计算窗体大小，可视范围区域
34     function resize(){
35         viewSize = getViewSize();
36         viewWidth = $(document).width() ;
37         viewHeight = viewSize[1] ;
38     }
39     function fly(obj){
40         var $obj = $(obj);
41         var currentTop = parseInt($obj.css('top'));
42         var currentLeft = parseInt($obj.css('left') );
43         var targetLeft = rand( 10 , viewWidth - $obj.width() );
44         var targetTop = rand(40, viewHeight /2 );
45         /*求两点之间的距离，利用勾股定理*/
46         var removing = Math.sqrt( Math.pow( targetLeft - currentLeft,2 )
47             + Math.pow( targetTop - currentTop , 2 ) );        
48         /*每秒移动24px 。计算所需要的时间，从而保持 气球的速度恒定*/
49         var moveTime = removing / 24;        
50         $obj.animate({ top : targetTop ,left:targetLeft} ,moveTime*1000,function(){
51             setTimeout(function(){
52                 fly(obj);
53             }, rand(1000, 3000) );
54         });    
55     }
56 };

补充：其中的 PNG透明图片，采用了DD_belatedPNG.js插件，其原理是 IE6中利用 VML使用PNG24格式图片透明。
输入框的圆角、阴影效果用了PIE（CSS3 rendering for IE）插件，其原理也是利用IE浏览器对VML的支持。

具体可以查看原址（包括源文件下载）：http://julying.com/blog/a-system-login-screen-background-effects-jquery/