标签：
以下代码直接粘贴复制即可。
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包哦！
标签：
原文地址：http://www.cnblogs.com/GetAlert/p/4529512.html
