Champagne.js 是個可以可以讓區塊內的子元素隨機的一一淡入顯示的外掛套件。除了套用在文字項目上之外,連一般的圖片項目也是沒問題的。
套件名稱:Champagne.js
套件網址:0.0.6
作者網站:http://freshtilledsoil.github.com/champagne/
套件網址:N/A
發佈日期:2012-05-04
檔案大小:1.78 KB
檔案下載:jquery.champagne.js
參數選項說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | beginning_delay(選填) 描述: 呼叫執行後多久開始動作(1000毫秒 = 1秒) 預設值: 300 delay_between(選填) 描述: 每個項目執行的間隔(1000毫秒 = 1秒) 預設值: 50 duration(選填) 描述: 項目的淡入速度(1000毫秒 = 1秒) 預設值: 500 onFinish(選填) 描述: 當項目都淡入載入完後執行的函式 預設值: function() {} |
方法說明:
檢視原始碼 JavaScript
1 2 | // 把指定的 ul li 項目隨機淡入 $(selector).champagne(options); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.champagne.js"></script> <style type="text/css"> /* 要加入 */ .champagne .hidden, .champagne2 .hidden { display: none; } .champagne, .champagne2 { border: 1px solid #ddd; font-size: 20px; font-weight: bold; height: 360px; list-style: none; padding: 0; position: relative; width: 768px; } .champagne li, .champagne2 li { background: #fff; border: 1px solid #ddd; height: 30px; float: left; padding: 20px; text-align: center; width: 150px; } .champagne2 { height: 284px; width: 568px; } .champagne2 li { height: 100px; width: 100px; } .champagne2 li a img { border: none; } </style> <script type="text/javascript"> $(function(){ // 呼叫執行後 0.6 秒開始淡入 .champagne 中的項目 // 每個項目間間隔 0.1 秒 $('.champagne').champagne({ beginning_delay: 600, delay_between: 100 }); // 呼叫執行後 3 秒開始淡入 .champagne2 中的項目 // 每個項目間間隔 0.2 秒 // 當全部載完後跳出個對話方塊 $('.champagne2').champagne({ beginning_delay: 3000, delay_between: 200, onFinish: function(){ alert('全部載入完畢'); } }); }); </script> <body> <h3>文字</h3> <ul class="champagne"> <li>男丁格爾</li> <li>abgne.tw</li> <li>jQuery</li> <li>Android</li> <li>guten tag</li> <li>namaste</li> <li>hello</li> <li>bonjour</li> <li>hola</li> <li>bon giorno</li> <li>ni hao</li> <li>chao</li> <li>guten tag</li> <li>namaste</li> <li>bonjour</li> <li>hola</li> <li>ni hao</li> <li>chao</li> <li>guten tag</li> <li>namaste</li> </ul> <h3>圖片</h3> <ul class="champagne2"> <li><a href="#"><img src="images/a.jpg" /></a></li> <li><a href="#"><img src="images/b.jpg" /></a></li> <li><a href="#"><img src="images/c.jpg" /></a></li> <li><a href="#"><img src="images/d.jpg" /></a></li> <li><a href="#"><img src="images/e.jpg" /></a></li> <li><a href="#"><img src="images/f.jpg" /></a></li> <li><a href="#"><img src="images/g.jpg" /></a></li> <li><a href="#"><img src="images/h.jpg" /></a></li> </ul> </body> |