jQZoom 實際執行畫面

jQZoom 是一個  JavaScript 的圖片放大鏡基於 jQuery 框架之下，jQZoom 可放大你想放大的地方一個簡單而容易使用的套件。

套件相於於以下瀏覽器：
 6+  2+ 1.0  2+  9+

使用方法：
首先載入需要用到的框件和套件主程式
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//jQZoom 的主程式碼 <script type='text/javascript' src='js/jquery.jqzoom-core.js'></script>
//jQZoom 的CSS設計檔案
<link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css">

接下來需要建立顯示區域
<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE">
    <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE">
</a>

最後加上 JavaScript 的程式碼就完成了
$(function(){
    var options = {
            zoomType: 'standard',
            lens:true,
            preloadImages: true,
            alwaysOn:false,
            zoomWidth: 300,
            zoomHeight: 250,
            xOffset:90,
            yOffset:30,
            position:'left'
            //...MORE OPTIONS
    };
    $('.MYCLASS').jqzoom(options);
});
附上套件可修改參數值以供參考

參數	預設	說明
zoomType	standard	放大的方式預設 standard 為隨滑鼠移動 reverse 隨滑鼠移動其他位置變灰階 drag 滑鼠拖曳方式移動 innerzoom 直接在框內做放大的動作
zoomWidth	300	放大的框寬度設定
zoomHeight	300	放大的框高度設定
xOffset	10	放大的框X軸(左邊)的偏移量
yOffset	0	放大的框Y軸(上面)的偏移量
position	right	放大框的位置 可設定值 left,right,left,bottom
preloadImages	true	是否預載放大圖像
preloadText	Loading zoom	圖片讀取時顯示文字
title	true	是否顯示小標題
lens	true	是否設定圖片小鏡頭
imageOpacity	0.4	設定為 reverse 時 圖片的不透明度
showEffect	show	顯示的方式 可設定為 show fadein
hideEffect	hide	消失的方式 可設定為 hide fadeout
fadeinSpeed	slow	變化淡入的速度 可設定為 fast slow 或者是毫秒
fadeoutSpeed	2000	變化淡出的速度 可設定為 fast slow 或者是毫秒

作者網站：http://www.mind-projects.it/projects/jqzoom
檔案大小：620 KB(包含範例)
檔案下載：http://www.mind-projects.it/projects/jqzoom/index.php#download_section
檔案備份：下載