倒计时


插件可以让简便的代码实现更多的功能，给程序员带来了极大的便捷，下面是本人利用jQuery的动画效果完成的一个简单的倒计时。

    简单的HTML样式：

                    <!--倒计时-->
<div class="three" id="three">
<h>3</h>
</div>
<div class="two" id="two">
<h>2</h>
</div>
<div class="one" id="one">
<h>1</h>
</div>
 

简单的css样式：

      .three,.two,.one{width: 100%;height: 100%;position:absolute;top: 0;left: 0;}
      .three{background: rgba(200,200,200,.3);}
      .two{background: rgba(100,100,100,.2);}
      .one{background: rgba(0,0,0,.1);}
      .three h,.two h,.one h{font-size: 1px;color:blue;font-weight: normal;
        position: absolute;top: 4%;left: 40%;}
      .three{z-index: 333;position: absolute;}
      .two{z-index: 666;position: absolute;}
      .one{z-index: 999;position: absolute;}
      .four{width: 100%;height: 100%;background:#fff;
       position: fixed;top:0;left: 0;}
 

以下是jQuery代码：

$(function(){
       $("#three h").hide();$("#two h").hide();$("#one h").hide();$("#img1").hide();
     $("html").mouseover(function(){
       $("#three h").show();
       $("#three h").animate({
     "fontSize":"500px",
                           },2000,function(){
    $("#three").toggle(0,'esea',function(){
     $("#two h").show();
            $("#two h").animate({
                    "fontSize":"500px",},2000,function(){
                $("#two").toggle(0,'esea',function(){
                $("#one h").show();
                  $("#one h").animate({
                    "fontSize":"500px",
                  },2000,function(){
                $("#one").toggle(0,'esea',function(){
   //内容区
                         });
                                })+$("#one").fadeOut(2000,'linear',function(){
                          $("#one").hide();
                                 $(".one").empty();
                                         $("#img1").slideDown(2000); });});
                                      })+$("#two").fadeOut(2000,'linear',function(){
                        $("#two").hide();
                               $(".two").empty();});});
                                        })+$("#three").fadeOut(2000,'linear',function(){
                            $("#three").hide();
                                               $(".three").empty();
                                    });
                          });
           });


 
通过鼠标的移入事件，触发倒计时，一个数字结束后通过回调另一个函数来触发另一个数字，因刚开始接触jQuery，所以jQuery代码显得很繁琐，暂时保留，以此警醒自己，日后简化它