Home » jQuery 外掛

[jQ]jQuery threesixty 0.6

範例 1
沒錯!只要 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 的迴響

發表迴響