jQuery如何制作動畫
下面為一組圖片（四張）展示
1
2
3
4
頁面代碼如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 7 .box{border:1px solid #aaccff;margin-top:10px;padding:10px;line-height:25px;} 8 9 .welcome{font-size:50px;color:Red;font-weight:bold;margin-top:220px;text-align:center;} 10 11 #coverbox{position:absolute;left:0px;top:100px;background-color:#e5e5e5;height:500px;width:100%;} 12 #coverbox #leftbox,#coverbox #rightbox{width:49%;height:500px;background-color:#ee00aa;} 13 #coverbox #leftbox{border-right:1px solid red;float:left;} 14 #coverbox #rightbox{border-left:1px solid red;float:right;} 15 16 </style> 17 <script type="text/javascript" src="Scripts/jquery-3.3.1.js"></script> 18 <script type="text/javascript"> 19 $(function () 20 { 21 $(document).click(function () 22 { 23 $("#leftbox,#rightbox").animate({ width: -1 + "px" }, 4000, function () 24 { 25 $("#coverbox").fadeOut(3000); 26 }); 27 }); 28 29 }); 30 31 </script> 32 33 34 </head> 35 <body style="font-size:12px;"> 36 <div class="box"> 37 38 <ol> 39 <li>實現拉幕效果，點擊灰色區域時，左右兩部分分別向兩側移動</li> 40 <li>拉幕效果完成之后，逐漸顯示：歡迎進入Jquery動畫世界</li> 41 </ol> 42 43 </div> 44 45 <div class="welcome">歡迎進入Jquery動畫世界</div> 46 47 <div id="coverbox"> 48 <div id="leftbox"></div> 49 <div id="rightbox"></div> 50 </div> 51 52 </body> 53 </html>
好了，一個簡單的動畫制作完成了
浙公網安備 33010602011771號