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

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

/*
/*
@function 热气球移动
@update by julying , 2012/7/25
*/
function airBalloon(balloon){
    var viewSize = [] , viewWidth = 0 , viewHeight = 0 ;
    resize();    
    $(balloon).each(function(){
        //首先对热气球进行随机定位
        $(this).css({
            //初始 top 取随机值
            top: rand(40, viewHeight * 0.5 ) , 
            left : rand( 10 , viewWidth - $(this).width() )
        });
        fly(this);
    });
    // 当浏览器窗口变化时候，重新计算热气球的坐标    
    $(window).resize(function(){
        resize()
        $(balloon).each(function(){
            //取消之前的动画事件，重新定义移动方式
            $(this).stop().animate(
                {top: rand(40, viewHeight * 0.5 ) , 
                left : rand( 10 , viewWidth - $(this).width())} ,
                1000 , 
                function(){
                    fly(this);
                }
            );
        });
    });
    //计算窗体大小，可视范围区域
    function resize(){
        viewSize = getViewSize();
        viewWidth = $(document).width() ;
        viewHeight = viewSize[1] ;
    }
    function fly(obj){
        var $obj = $(obj);
        var currentTop = parseInt($obj.css('top'));
        var currentLeft = parseInt($obj.css('left') );
        var targetLeft = rand( 10 , viewWidth - $obj.width() );
        var targetTop = rand(40, viewHeight /2 );
        /*求两点之间的距离，利用勾股定理*/
        var removing = Math.sqrt( Math.pow( targetLeft - currentLeft,2 )
            + Math.pow( targetTop - currentTop , 2 ) );        
        /*每秒移动24px 。计算所需要的时间，从而保持 气球的速度恒定*/
        var moveTime = removing / 24;        
        $obj.animate({ top : targetTop ,left:targetLeft} ,moveTime*1000,function(){
            setTimeout(function(){
                fly(obj);
            }, rand(1000, 3000) );
        });    
    }
};

补充：其中的 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/