jquery 实现飘落效果

<!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>

View Code

关键函数:1.setInterval(CheckElement,1);每隔一段时间执行某个方法。

2.Math.random();（此函数是随机获取0-1之间的数）。

3.$("").delay()延时

4.$("").animate()执行动画

熟悉应用以上函数，可以实现很多其他效果，自由落体，弹球，飘雪，下雨等效果，以下是类似落叶效果