Home » jQuery 外掛

[jQ]jQuery miniZoomPan 1.0

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



有時圖片太大時會載入很久且也可能會撐大整個畫面，所以通常都是會先縮圖或是採用燈箱的效果。而 jQuery miniZoomPan 則是能在小圖中直接瀏覽大圖，讓你的效果硬是比其它人優。

套件名稱：jQuery miniZoomPan
套件版本：1.0
作者網站：http://www.gcmingati.net/wordpress/2009/06/18/jquery-offset/
套件網址：http://plugins.jquery.com/project/miniZoomPan
發佈日期：2009-06-18
檔案大小：2.25 KB
檔案下載：miniZoomPan.js miniZoomPan.css

參數說明：

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

sW(選填)
描述： 小圖的寬
預設值： 10
 
sH(選填)
描述： 小圖的高
預設值： 10
 
lW(選填)
描述： 大圖的寬
預設值： 20
 
lH(選填)
描述： 大圖的高
預設值： 20
 
frameColor(選填)
描述： 邊框顏色
預設值： "#cecece"
 
frameWidth(選填)
描述： 邊框寬度
預設值： 1
 
loaderContent(選填)
描述： 圖片載入時的提示訊息；也可以用圖片來當提示 "<img src='yoursite.com/spinner.gif' />"
預設值： "loading..."

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的元素加入 miniZoomPan 效果
$(selector).miniZoomPan(settings);

使用範例：

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

<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="miniZoomPan.css">
<script type="text/javascript" src="miniZoomPan.js"></script>
<style type="text/css">
.minizoompan {
	float: left;
	margin: 0 10px 10px 0;
}
</style>
<script type="text/javascript">
	$(function(){
		// 把 #zoom01 加上 miniZoomPan 效果
		$('#zoom01').miniZoomPan({
			sW: 200,
			sH: 250,
			lW: 370,
			lH: 462
		});
 
		// 把 #zoom02 加上 miniZoomPan 效果
		// 並設定其外邊框及載入提示
		$('#zoom02').miniZoomPan({
			sW: 200,
			sH: 133,
			lW: 1000,
			lH: 665,
			frameColor: '#2e3e40',
			frameWidth: 58,
			loaderContent: '<img src="images/spinner.gif" />'
		});
 
		// 把 #pano 加上 miniZoomPan 效果
		$('#pano').miniZoomPan({
			sW: 515,
			sH: 100,
			lW: 3555,
			lH: 690
		});
	});
</script>
<body>
	<div id="zoom01">
		<img src="images/leaf_s.jpg" />
	</div>
 
	<div id="zoom02">
		<img src="images/Schick05_s.jpg" />
	</div>
 
	<div id="pano">
		<img src="images/pan_s.jpg" />
	</div>
</body>
範例 1

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

2 筆針對 [jQ]jQuery miniZoomPan 1.0 的迴響

發表迴響