【网页插件】热气球漂浮的效果
热气球运动效果大致实现细节如下：
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/
