Home » jQuery 外掛

[jQ]Grid Navigation Effects

[ 日期： | 瀏覽：7,126 | 迴響：3 ]
範例 1
請協助我把這個效果加到我的網站 (只要 2,000 元)
沒錯!只要 2,000 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



Grid Navigation Effects 提供了類似 Grid 排列及切換的外掛套件，其中還提供了多達 8 組以上的切換效果可使用。

套件名稱：Grid Navigation Effects
套件網址：N/A
作者網站：http://tympanus.net/codrops/2011/06/09/grid-navigation-effects/
套件網址：N/A
發佈日期：2011-06-09
檔案大小：20.9 KB
檔案下載：jquery.gridnav.js gridNavigation.css
引用檔案：jquery.easing.1.3.js jquery.mousewheel.js
資料下載：images.zip

參數選項說明：

檢視原始碼 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

rows(選填)
描述： 一次顯示幾行
預設值： 2
 
navL(選填)
描述： 控制切換往上的按鈕元素
預設值： '#tj_prev'
 
navR(選填)
描述： 控制切換往下的按鈕元素
預設值： '#tj_next'
 
type(選填)
描述： 切換時的動畫設定
預設值： {
	mode: 'def',
	speed: 500,
	easing: 'jswing',
	factor: 50,
	reverse: false
}
 
mode(選填)
描述： 切換的效果方式; 允許的值有 'def'、'fade'、'seqfade'、'updown'、'sequpdown'、'showhide'、'disperse' 及 'rows'
預設值： 'def'
 
speed(選填)
描述： 切換的動畫速度(1000毫秒 = 1秒); 此設定只針對 mode 為 'fade'、'seqfade'、'updown'、'sequpdown'、'showhide'、'disperse' 及 'rows' 有效
預設值： 500
 
easing(選填)
描述： 切換的動畫緩衝效果; 此設定只針對 mode 為 'fade'、'seqfade'、'updown'、'sequpdown'、'showhide'、'disperse' 及 'rows' 有效
預設值： 'jswing'
 
factor(選填)
描述： 切換時每一個元素的動畫間隔(1000毫秒 = 1秒); 此設定只針對 mode 為 'seqfade'、'sequpdown' 及 'rows' 有效
預設值： 50
 
reverse(選填)
描述： 是否反轉切換效果; 此設定只針對 mode 為 'sequpdown' 有效
預設值： false

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的元素加上 Grid Navigation Effects 效果
$(selector).gridnav(method);

使用範例：

檢視原始碼 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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.gridnav.js"></script>
<style type="text/css">
	.tj_container{
		width: 440PX;
		height: 220px;
		position: relative;
		margin: 0;
	}
	#tj_container ul {
		list-style: none;
	}
	#tj_container ul, #tj_container li {
		margin: 0;
		padding: 0;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 把 #tj_container 加上 Grid Navigation Effects 效果
		// 切換方式來依序由下往上
		// 動畫時間 0.4 秒, 每一個項目的動畫間隔 0.02 秒
		$('#tj_container').gridnav({
			type: {
				mode: 'sequpdown', 
				speed: 400,
				factor: 50
			}
		});
	});
</script>
 
<body>
	<div id="tj_container" class="tj_container">
		<div class="tj_nav">
			<span id="tj_prev" class="tj_prev">Previous</span>
			<span id="tj_next" class="tj_next">Next</span>
		</div>
		<div class="tj_wrapper">
			<ul class="tj_gallery">
				<li><a href="#"><img src="images/a.jpg" alt="A" /></a></li>
				<li><a href="#"><img src="images/b.jpg" alt="B" /></a></li>
				<li><a href="#"><img src="images/c.jpg" alt="C" /></a></li>
				<li><a href="#"><img src="images/d.jpg" alt="D" /></a></li>
				<li><a href="#"><img src="images/e.jpg" alt="E" /></a></li>
				<li><a href="#"><img src="images/f.jpg" alt="F" /></a></li>
				<li><a href="#"><img src="images/g.jpg" alt="G" /></a></li>
				<li><a href="#"><img src="images/h.jpg" alt="H" /></a></li>
				<li><a href="#"><img src="images/i.jpg" alt="I" /></a></li>
				<li><a href="#"><img src="images/j.jpg" alt="J" /></a></li>
				<li><a href="#"><img src="images/k.jpg" alt="K" /></a></li>
				<li><a href="#"><img src="images/l.jpg" alt="L" /></a></li>
				<li><a href="#"><img src="images/m.jpg" alt="M" /></a></li>
				<li><a href="#"><img src="images/n.jpg" alt="N" /></a></li>
				<li><a href="#"><img src="images/o.jpg" alt="O" /></a></li>
				<li><a href="#"><img src="images/p.jpg" alt="P" /></a></li>
				<li><a href="#"><img src="images/q.jpg" alt="Q" /></a></li>
				<li><a href="#"><img src="images/r.jpg" alt="R" /></a></li>
				<li><a href="#"><img src="images/s.jpg" alt="S" /></a></li>
				<li><a href="#"><img src="images/t.jpg" alt="T" /></a></li>
			</ul>
		</div>
	</div>
</body>
範例 1

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

3 筆針對 [jQ]Grid Navigation Effects 的迴響

發表迴響