<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹球特效</title> <script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script> <style type="text/css"> .ball{ width:50px; height:50px; border-radius:100%; position:absolute; opacity:0;} </style> </head> <body> <img class="ball" src="Images/ball/hongxin.png" class="ball"/> <img class="ball" src="Images/ball/hongxin.png" class="ball"/> <img class="ball" src="Images/ball/hongxin.png" class="ball"/> <img class="ball" src="Images/ball/hongxin.png" class="ball"/> <img class="ball" src="Images/ball/hongxin.png" class="ball"/> <img class="ball" src="Images/ball/hongxin.png" class="ball"/> <img class="ball" src="Images/ball/hongxin.png" class="ball"/> <img class="ball" src="Images/ball/hongxin.png" class="ball"/> <img class="ball" src="Images/ball/hongxin.png" class="ball"/> <img class="ball" src="Images/ball/hongxin.png" class="ball"/> </body> </html> <script type="text/javascript"> var pageHeight = $(window).height(); var pageWidth = $(window).width(); var constHeight = pageHeight - 100; var constWidth = pageWidth - 100; var randomWidth; var delayTime; var animateCount; $(function(){ setInterval(CheckElement,1); }) function CheckElement(){ animateCount = $(".ball:not(:animated)").length; if(animateCount > 0) Auto(); } function Auto(){ $(".ball:not(:animated)").each(function(){ delayTime = Math.random()*3000; randomWidth = Math.random()*constWidth; $(this).css("left",randomWidth).delay(delayTime).animate({top:constHeight,opacity:1,100,height:100},5000,"linear") .animate({top:constHeight/1.8,opacity:0,150,height:150},3000,"linear") .animate({top:0,0,height:0},1,"linear") }) } </script>
关键函数:1.setInterval(CheckElement,1);每隔一段时间执行某个方法。
2.Math.random();（此函数是随机获取0-1之间的数）。
3.$("").delay()延时
4.$("").animate()执行动画
熟悉应用以上函数，可以实现很多其他效果，自由落体，弹球，飘雪，下雨等效果，以下是类似落叶效果
