Home » jQuery 外掛

[jQ]jQuery threesixty 0.6

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



jQuery threesixty 的效果其實跟筆者之前寫過的利用滑鼠移動控制圖片預覽一樣，可以利用滑鼠的移動來切換顯示的圖片。像它設了 25 張圖片，然後產生像 360 度產品預覽一樣。

套件名稱：jQuery threesixty
套件網址：0.6
作者網站：http://www.mathieusavard.info/threesixty/demo.html
套件網址：N/A
發佈日期：2011-08-09
檔案大小：5.88 KB
檔案下載：jquery.threesixty.js

參數選項說明：

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

images(必填)
描述： 轉動時要顯示的照片陣列
預設值： []
 
method(選填)
描述： 控制轉動的事件；允許的值有 "click", "mouseover" 及 "auto"(自動)
預設值： "click"
 
cycle(選填)
描述： 在轉動過程中是顯示幾輪(就是 images 中的圖片要從第一張到最後一張顯示幾次)
預設值： 1
 
resetMargin(選填)
描述： 這...不太懂它的用法, 但程式中也沒用到
預設值： 0
 
direction(選填)
描述： 顯示的方向順序, 允許的值有 "forward"(逆時鐘) 及 "backward"(順時鐘)
預設值： "forward"
 
sensibility(選填)
描述： 用移動距離計算要顯示第幾張的...權重, 筆者建議設成 1
預設值： cycle * 0.35
 
autoscrollspeed(選填)
描述： 當 method 設成 "auto" 時的自動轉動速度(1000毫秒 = 1秒)
預設值： 500

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的元素圖片轉換成 threesixty 效果
$(selector).threesixty(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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.threesixty.js"></script>
<script type="text/javascript">
	$(function(){
		// 產生 1.jpg~25.jpg 的圖片
		var arr = [];
		for(var x=1; x<= 25; x++){
			arr.push('images/' + x + '.jpg');
		}
 
		// 讓 #example1 轉換成 threesixty 效果
		// 圖片來源為 arr 陣列
		// 使用滑鼠移動來控制轉動
		$('#example1').threesixty({
			images: arr, 
			method: 'mousemove', 
			cycle: 1,
			sensibility: 1
		});
 
		// 讓 #example2 轉換成 threesixty 效果
		// 圖片來源為 arr 陣列
		// 自動轉動且反順時鐘顯示
		$("#example2").threesixty({
			images: arr, 
			method: 'auto', 
			autoscrollspeed: 100, 
			direction: 'backward'
		});
	});
</script>
 
<body>
	<h3>用滑鼠轉動</h3>
	<img src="images/1.jpg" id="example1" width="480" height="480">
 
	<h3>自動轉動</h3>
	<img src="images/1.jpg" id="example2" width="480" height="480">
</body>
範例 1

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

2 筆針對 [jQ]jQuery threesixty 0.6 的迴響

發表迴響