jQuery倒计时(初级)
程序缘 2019-01-16 08:50:45 倒计时
插件可以让简便的代码实现更多的功能,给程序员带来了极大的便捷,下面是本人利用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代码显得很繁琐,暂时保留,以此警醒自己,日后简化它