Home » jQuery 外掛

[jQ]Champagne.js 0.0.6

範例 1
沒錯!只要 500 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!



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>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響