<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>端午粽情</title>
<link rel="stylesheet" href="duanwu.css">
<script src="duanwu.js" type="text/javascript"></script>
</head>
<body>
<div class="main">
<div class="box" id="box">
<div class="zongzi" id="zongzi"></div>
<div class="zongzir" id="zongzir" ></div>
<div class="line" id="line"></div>
</div>
<div class="leaf_open" id="leaf_open"></div>
<div class="leaf_left " id="leaf_left"></div>
<div class="leaf_right" id="leaf_right"></div>
<div class="text_j text_mirror_5 " id="text_j"></div>
<div class="text_h text_mirror_5 " id="text_h"></div>
<div class="text_r text_mirror_5" id="text_r"></div>
<div class="text_x text_mirror_5"></div>
<div class="words" id="words">
<div class="caption" id="caption"></div>
<div class="to" id="caption">亲爱的朋友</div>
<div class="wishes">愿幸福就像一根根粽绳，紧紧的缠住你;愿快乐就像一片片粽叶，团团<br>地围住你;美满就像一阵阵粽香，久久地环绕你。衷心祝你端午快!</div>
<div class="from">花钱</div>
</div>
</div>
</body>
</html>
/*css部分*/
*{margin: 0;
padding: 0;
font-family: "WenQuanYi Micro Hei",SimSun,sans-serif;
color:darkgray;}
body{
}
.main{
width:1200px;
height:600px;
background-image: url(images/bg.jpg);
position: absolute;
left:50%;
top:50%;
margin-left: -600px;
margin-top: -300px;
}
.box{
width: 312px;
height: 305px;
position:relative;
left:700px;
top:200px;}
.box_cg{animation: myzongzi 5s infinite;}
@keyframes myzongzi{
0%{transform: rotate(0deg);}
20%{transform:rotate(5deg);}
40%{transform:rotate(-5deg);}
60%{transform:rotate(3deg);}
80%{transform:rotate(-3deg);}
100%{transform:rotate(0deg);}
}
.zongzi{
background-image: url(images/zz.png);
width:312px;
height:305px;
opacity: 1;
transition: all 3s;
}
.zongzi_out{
display: none;
opacity:0;
}
.zongzir{
background-image: url(images/zzr_1.png);
width: 282px;
height: 206px;
position: absolute;
left:40px;
top:70px;
z-index:4;
transform: scale(1);
opacity: 0;
transition: all 5s;
}
.zongzir_on{
opacity:1;
transform: scale(.9);
}
.zongzir_out{
transform: scale(0.5);
display: none;
opacity:0;
}
.zongzir_2{
background-image: url(images/zzr_2.png);
width: 273px;
height: 234px;
position: absolute;
left:40px;
top:70px;
z-index:4;
}
.zongzir_3{
background-image: url(images/zzr_3.png);
width: 267px;
height: 239px;
position: absolute;
left:40px;
top:70px;
z-index:4;
}
.zongzir_4{
background-image: url(images/zzr_4.png);
width: 272px;
height: 237px;
position: absolute;
left:40px;
top:70px;
z-index:4;
}
.zongzir_0{
background-image: url(images/zzr_1.png);
width: 282px;
height: 206px;
position: absolute;
left:40px;
top:70px;
z-index:4;
}
.text_j{
background-image: url(images/t_jixiang.png);
background-size:cover;
transform: scale(.8);
width:180px;
height:100px;
position:absolute;
left:790px;
top:350px;
z-index: 5;
opacity: 1;
transition: all 0s;}
.text_r{
background-image: url(images/t_ruyi.png);
width:180px;
height:100px;
transform: scale(.8);
position:absolute;
left:790px;
top:350px;
z-index: 5;
opacity:1;
transition:all 0s;
}
.text_h{
background-image: url(images/t_haoyun.png);
position: absolute;
transform: scale(.8);
width:180px;
height:100px;
left:790px;
top:350px;
z-index: 6;
opacity: 1;
transition: all 0s;
}
.text_x{display: none;
background-image: url(images/t_xingfu.png);
position: absolute;
transform: scale(.8);
width:180px;
height:100px;
left:790px;
top:350px;
z-index: 3;
transition: all 0s;
}
.text_show_1{ transform:scale(.45) rotate(-10deg) translate(170px,50px) rotate(-20deg); opacity: 1;}
.text_mirror_1{transform:scale(.6) rotate(15deg) translate(-80px,30px) rotate(0deg);opacity: 1;}
.text_show_2{ transform:scale(.6) rotate(-10deg) translate(80px,20px) rotate(-10deg);opacity: 1;}
.text_mirror_2{transform:scale(.55) rotate(15deg) translate(-120px,30px) rotate(15deg);opacity: 1;}
.text_show_3{ transform:scale(.7) rotate(-10deg) translate(65px,20px) rotate(5deg);opacity: 1;}
.text_mirror_3{transform:scale(.5) rotate(15deg) translate(-130px,30px) rotate(20deg);opacity: 1;}
.text_mirror_5{opacity: 0;}
.leaf_left{
background-image: url(images/leaf_left.png);
width:147px;
height:266px;
transform: scale(.8);
position:absolute;
left:740px;
top:220px;
z-index: 1;
opacity: 0;
transform-origin: left bottom;
transition: all 3s;
}
.leaf_left_on{
opacity: 1;
transform: rotate(-5deg);
}
.leaf_left_out{
transform: rotate(-13deg);
opacity:0;
}
.leaf_right{
background-image: url(images/leaf_right.png);
width:318px;
height:338px;
position:absolute;
transform: scale(.8);
left:750px;
top:160px;
z-index: 1;
opacity: 0;
transform-origin: left bottom;
transition: all 3s;
}
.leaf_right_on{
opacity: 1;
transform: rotate(5deg);
}
.leaf_right_out{
transform: rotate(13deg);
display: none;
opacity: 0;
}
.leaf_open{
background-image: url(images/leaf_expand.png);
width:618px;
height:464px;
position:absolute;
left:590px;
top:200px;
z-index: 1;
opacity: 0;
transition: all 3s;
}
.leaf_open_out{opacity:1;}
.line{
background-image:url(images/line_1.png);
width: 218px;
height: 180px;
position: absolute;
left:10px;
top:120px;
opacity: 1;
transition: all 3s;
cursor: pointer;
z-index:9;
}
.line_1{
background-image:url(images/line_2.png);
width: 219px;
height: 159px;
position: absolute;
left:10px;
top:155px;
opacity: 0;
transition: all 3s;
}
.line_2{
background-image:url(images/line_3.png);
width: 264px;
height: 117px;
position: absolute;
left:10px;
top:220px;
}
.line_3{
background-image:url(images/line_4.png);
width: 288px;
height: 56px;
position: absolute;
left:15px;
top:290px;
}
.line_4{display: none;}
.words .caption{
background-image:url(images/caption.png);
width:400px ;
height:240px ;
opacity:0;
transition: all 1s;
}
.words{
position: absolute;
left:145px;
top:143px;
margin-left:30px;
}
.to{
margin: 10px 0;
opacity:0;
transition:all 1s 0.5s;
}
.from{margin: 10px 0;
text-align: right;
opacity: 0;
transition:all 1s 1s;}
.wishes{
opacity:0;
transition:all 1s 1.5s;
}
.words_cg >.to,
.words_cg >.from,
.words_cg >.caption,
.words_cg >.wishes
{
opacity:1;
margin-left: 0;
}
/*js部分*/
var g=function(id){
return document.getElementById(id);
}
/*定义的时间轴函数*/
var Timeline=function(){
this.order=[];
this.add=function(timeout,func,log){
this.order.push({log:log,
func:func,
timeout:timeout});}
this.start=function(ff){
for(s in this.order){
(function(me){
var timeout=me.timeout;
var log=me.log;
var fun=me.func;
/*这里ff或0是当ff没有取值的时候ff效果使得ff初始为0，当点击时ff大于first的延时时会使得timeout为负数，所以以要用一个math.max函数*/
timeout=Math.max(timeout-(ff||0),0);
setTimeout(fun,timeout);
setTimeout(function(){console.log("log>-",log,"time->",timeout)},timeout);
})(this.order[s])}
}
}
var a1=new Timeline();
var a2=new Timeline();
var a3=new Timeline();
a1.add(1,function(){g("box").className="box box_cg";
g("line").onClick=function(){
a2.start(100);}
},"first");
// a1.start();
a2.add(500,function(){g("line").className="line_1";
g("words").className="words words_cg";
});
a2.add(1000,function(){g("line").className="line_2";
});
a2.add(1500,function(){g("line").className="line_3";});
a2.add(2000,function(){g("line").className="line_4";
g("caption").className="caption box_cg";});
a2.add(2500,function(){g("zongzi").className="zongzi_out";
g("zongzir").className="zongzir zongzir_on";
g("leaf_left").className="leaf_left leaf_left_on";
g("leaf_right").className="leaf_right leaf_right_on";});
a2.add(3500,function(){g("leaf_left").className="leaf_left leaf_left_on leaf_left_out";
g("leaf_right").className="leaf_right leaf_right_on leaf_right_out";
g("leaf_open").className="leaf_open leaf_open_out";
a3.start();
});
a3.add(4100,function(){ g("text_h").className="text_h";
g("zongzir").className="zongzir zongzir_on zongzir_out";
g("zongzir").className="zongzir_0";
});
a3.add(4500,function(){
g("zongzir").className="zongzir_2";
g("text_j").className="text_j text_show_1";
g("text_h").className="text_h text_mirror_1";
g("text_r").className="text_r text_mirror_5";
});
a3.add(5000,function(){ g("zongzir").className="zongzir_3";
g("text_j").className="text_j text_show_2";
g("text_h").className="text_h text_mirror_2";
g("text_r").className="text_r text_mirror_5";
});
a3.add(5500,function(){ g("zongzir").className="zongzir_4";
g("text_j").className="text_j text_show_3";
g("text_h").className="text_h text_mirror_3";
g("text_r").className="text_r text_mirror_5";});
a3.add(6000,function(){ g("zongzir").className="zongzir_0";
g("text_j").className="text_j text_mirror_5";
g("text_h").className="text_h ";
g("text_r").className="text_r text_mirror_5";
});
a3.add(6500,function(){ g("zongzir").className="zongzir_4";
g("text_r").className="text_r text_show_3";
g("text_h").className="text_h text_mirror_3";
g("text_j").className="text_j text_mirror_5";});
a3.add(7000,function(){ g("zongzir").className="zongzir_3";
g("text_r").className="text_r text_show_2";
g("text_h").className="text_h text_mirror_2";
g("text_j").className="text_j text_mirror_5";});
a3.add(7500,function(){ g("zongzir").className="zongzir_2";
g("text_r").className="text_r text_show_1";
g("text_h").className="text_h text_mirror_1";
g("text_j").className="text_j text_mirror_5";});
a3.add(8000,function(){ g("zongzir").className="zongzir_0";
g("text_r").className="text_r ";
g("text_j").className="text_j text_mirror_5";
g("text_h").className="text_h text_mirror_5";});
你写成onClick，应该写成onclick