男丁格爾's 脫殼玩

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

jqZoom 2.2

jqZoom 套件可產類似 Flash 那樣的放大鏡縮放的效果，用在商品展示上還蠻好用的。

套件名稱：jqZoom
套件版本：2.2
作者網站：http://www.mind-projects.it/blog/jqzoom_v10
套件網址：http://plugins.jquery.com/project/jQzoom
發佈日期：2009-03-29
檔案大小：4.84 KB
檔案下載：jquery.jqzoom.js jqzoom.css

參數說明：

檢視原始碼 JavaScript

xzoom(選填)
描述： 縮放框的寬
預設值： 200
 
yzoom(選填)
描述： 縮放框的高
預設值： 200
 
offset(選填)
描述： 圖片跟縮放框的距離
預設值： 10
 
position(選填)
描述： 縮放框在圖片的位置
預設值： "right"
 
lens(選填)
描述： 是否使用透明圖層
預設值： 1
 
preload(選填)
描述： 是否預載大圖
預設值： 1

方法說明：

檢視原始碼 JavaScript

1 2	// 使用 jqZoom 效果 $(selector).jqueryzoom([options]);

使用範例：

檢視原始碼 JavaScript

<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="jqzoom.css">
<script type="text/javascript" src="jquery.jqzoom.js"></script>
<script type="text/javascript">
	$(function(){
		// 設定 xzoom 及 yzoom 等值
		$(".jqzoom").jqueryzoom({
			xzoom: 300,
			yzoom: 300
		});
	});
</script>
 
<body>
	<div class="jqzoom">
		<img src="images/triumph_small.jpg"  alt="macchina"  jqimg="images/triumph.jpg">
	</div>
 
	<div style="border:1px solid #CCCCCC;padding:50px;float:left;clear:both;width:80%;margin-bottom:10px;">
		<div class="jqzoom">
			<img src="images/shoe1_small.jpg"  alt="shoel"  jqimg="images/shoe1_big.jpg">
		</div>
	</div>
</body>

範例 1

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

附註：
使用時建議用一個 DIV 區塊來放圖片，並把該區塊的 className 設為 jqzoom，並在 IMG 中加上 jqimg 的屬性來指定大圖。

縮放圖片：

也許您對這些文章也有興趣

8 筆針對 [jQ]jqZoom 2.2 的迴響

小愛於 2010-03-22 10:07:30 說：

不好意思唷!!

這個檔案下載是不是不完整呢??

好像少了什麼檔案的說>"”<

回覆 ↓
- 男丁格爾於 2010-03-22 16:34:29 說：
  
  如果你覺得有缺少的話..可以直接到作者網站下載完整的範例檔..!!
  
  回覆 ↓
小愛於 2010-03-22 10:07:56 說：

但是右邊放大效果的寬高不知道在哪個地方修改的說…

因為改了以後,左邊的ZOOM+區塊好像就跟著右邊的寬高一起改變

那跟原本的意思就不一樣了說>"<

回覆 ↓
derek 於 2010-03-22 14:35:23 說：

to 小愛：
修改jquery.jqzoom.js檔裡面的↓
$("div.zoomdiv").width(settings.xzoom*1.5);
$("div.zoomdiv").height(settings.yzoom*1.5);
看你要加大幾倍就[*多少]，這裡是加大1.5倍

回覆 ↓
botio 於 2011-07-20 19:52:15 說：

你是我的偶像!!男丁格爾你好神~愛你喔~

回覆 ↓
- 男丁格爾於 2011-07-21 22:09:38 說：
  
  你應該到原作者網站留言的XD
  
  回覆 ↓
鹿嘻於 2011-12-31 01:21:17 說：

請問這段程式要怎麼讓它出現??

回覆 ↓
- 男丁格爾於 2012-01-02 08:59:12 說：
  
  若留言中有script標籤時, 可能會被過濾掉..
  直接貼code就好
  
  回覆 ↓

也許您對這些文章也有興趣

8 筆針對 [jQ]jqZoom 2.2 的迴響

發表迴響 取消回覆

發表迴響取消回覆