以下代码直接粘贴复制即可。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>myLove</title>
8 <meta name="author" content="Administrator" />
9 <!-- Date: 2015-05-25 -->
10 <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
11 <script type="text/javascript">
12 $(function(){
13 $(‘#start‘).click(function(){
14 if($(‘#start‘).html()==‘Start‘){
15 $(this).hide();
16 $(‘#divFive‘).show();
17 divFive=$(‘#divFive‘);
18 divFive.animate({
19 height:‘300px‘,
20 left:‘250px‘,
21 top:‘250px‘,
22 width:‘300px‘
23 });
24 five=$(‘.five‘);
25 five.animate({
26 lineHeight:‘300px‘,
27 fontSize:‘200px‘
28 },function(){
29 divTwo=$(‘#divTwo‘);
30 divFive.animate({
31 opacity:‘0‘
32 });
33 divTwo.css({‘color‘:‘#FFF‘});
34 divTwo.animate({
35 opacity:‘1‘
36 },function(){
37 divTwo.animate({
38 height:‘100px‘,
39 left:‘550px‘,
40 top:‘0‘,
41 opacity:‘1‘,
42 width:‘100px‘
43 });
44 two=$(‘.two‘);
45 two.animate({
46 lineHeight:‘100px‘,
47 fontSize:‘50px‘
48 },function(){
49 divTwo.animate({
50 opacity:‘0‘
51 });
52 divOne=$(‘#divOne‘);
53 divOne.animate({
54 opacity:‘1‘
55 },function(){
56 divOne.animate({
57 height:‘300px‘,
58 left:‘850px‘,
59 top:‘250px‘,
60 width:‘300px‘
61 });
62 one=$(‘.one‘);
63 one.animate({
64 lineHeight:‘300px‘,
65 fontSize:‘200px‘
66 },function(){
67 divOne.animate({
68 opacity:‘0‘
69 });
70 divLastFive=$(‘#divLastFive‘);
71 divLastTwo=$(‘#divLastTwo‘);
72 divLastOne=$(‘#divLastOne‘);
73 divLastFive.animate({
74 opacity:‘1‘
75 });
76 divLastTwo.animate({
77 opacity:‘1‘
78 });
79 divLastOne.animate({
80 opacity:‘1‘
81 },function(){
82 divLastFive.css({‘z-index‘:‘99‘});
83 divLastFive.animate({
84 left:‘120px‘,
85 top:‘200px‘,
86 height:‘300px‘,
87 width:‘300px‘
88 });
89 lastFive=$(‘.lastFive‘);
90 lastFive.animate({
91 lineHeight:‘300px‘,
92 fontSize:‘200px‘
93 });
94 divLastTwo.css({‘z-index‘:‘98‘});
95 divLastTwo.animate({
96 left:‘360px‘,
97 top:‘200px‘,
98 height:‘300px‘,
99 width:‘300px‘
100 });
101 lastTwo=$(‘.lastTwo‘);
102 lastTwo.animate({
103 lineHeight:‘300px‘,
104 fontSize:‘200px‘
105 });
106 divLastOne.animate({
107 left:‘595px‘,
108 top:‘200px‘,
109 height:‘300px‘,
110 width:‘300px‘
111 });
112 lastOne=$(‘.lastOne‘);
113 lastOne.animate({
114 lineHeight:‘300px‘,
115 fontSize:‘200px‘
116 },function(){
117 $(‘#start‘).html(‘End‘);
118 $(‘#start‘).show();
119 });
120
121 });
122
123 });
124 });
125
126 });
127
128 });
129 });
130 }else{
131 window.opener=null;
132 window.close();
133 }
134 });
135 });
136 </script>
137 <style type="text/css">
138 * {margin:0;padding:0;}
139 .warp {position: relative;width: 1000px;margin: auto !important;}
140 .lastFive {text-align: center;line-height: 100px;font-size: 50px;color:red;}
141 .lastTwo {text-align: center;line-height: 100px;font-size: 50px;color:#FFF;}
142 .lastOne {text-align: center;line-height: 100px;font-size: 50px;color:#000;}
143 .five {text-align: center;line-height: 100px;font-size: 50px;color:red;}
144 .two {text-align: center;line-height: 300px;font-size: 200px;}
145 .one {text-align: center;line-height: 100px;font-size: 50px;color:#000;}
146 #start { margin: 60px auto;display: block;background-color: green; border: solid 1px #000;color: #FFF;width: 200px;height: 50px;font-size: 20px;}
147 #divLastFive {position: absolute;z-index: 99;opacity:0;width:100px;height:100px;background-color:#00FF00;}
148 #divFive {position: absolute;display:none; z-index: 99;width:100px;height:100px;background-color:#00FF00;}
149 #divLastTwo {position: absolute; width:100px;height:100px;left:400px;opacity:0;background-color:red;}
150 #divTwo {background-color:red;opacity:0;width:100px;height:100px;position:absolute;height:300px;left:250px;top:250px;width:300px;}
151 #divLastOne {position: absolute;width:100px;height:100px;left:850px;opacity:0;background-color:#FFFF00;}
152 #divOne {position: absolute;width:100px;height:100px;left:550px;opacity:0; background-color:#FFFF00;}
153 </style>
154 </head>
155 <body>
156
157 <div class="warp">
158 <button id="start">Start</button>
159 <div id="divFive" >
160 <div class="five">我</div>
161 </div>
162 <div id="divTwo">
163 <div class="two">爱</div>
164 </div>
165 <div id="divOne">
166 <div class="one">你</div>
167 </div>
168
169
170 <div id="divLastFive" >
171 <div class="lastFive">我</div>
172 </div>
173 <div id="divLastTwo">
174 <div class="lastTwo">爱</div>
175 </div>
176 <div id="divLastOne">
177 <div class="lastOne">你</div>
178 </div>
179 </div>
180 </body>
181 </html>
不过别忘了带上js包哦！
时间： 2024-10-17 02:29:46