有時在做網頁設計時，客戶的品是需要展示細節的，例如珠寶類，可是由於版面考量圖片又沒辦法太大，這時候又需要展示細節，該怎麼辦呢?今天就來介紹這款放大鏡外掛，也是個很不錯用的外掛。
外掛基本資料
外掛名稱：Cloud Zoom
版本：1.0.2
作者網站：點我連結
下載連結：Cloud Zoom
引用檔案：jquery 1.4.2
範例：
不囉嗦先看範例
 |
單純放大。 |
| |
縮圖上加上遮罩。 |
| |
原地放大。 |
| |
縮圖加上模糊效果。 |
使用方法：
先載入需要的js及css檔
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/cloud-zoom.1.0.2.min.js" type="text/javascript"></script>
<link href="/css/cloud-zoom.css" rel="stylesheet" type="text/css" />
這個外掛不用再另外呼叫javascript的函數，只需要在圖片外面的a 加上class名稱cloud-zoom就可以使用了
單純放大
<a href="/images/pic_001.jpg" class="cloud-zoom" rel="adjustX:10, smoothMove:3"> <img src="/images/pic_001.jpg" alt="cloud-zoom demo01" title="相片標題" style="width: 160px; height: 120px;" /> </a>
縮圖加上遮罩
<a href="/images/pic_001.jpg" class="cloud-zoom" rel="tint:'#ff0000', tintOpacity:0.3, smoothMove:3, adjustX:10"> <img src="/images/pic_001.jpg" alt="cloud-zoom demo01" title="相片標題" style="width: 160px; height: 120px;" /> </a>
原地放大
<a href="/images/pic_001.jpg" class="cloud-zoom" rel="position:'inside',showTitle: false, smoothMove:3"> <img src="/images/pic_001.jpg" alt="cloud-zoom demo01" title="相片標題" style="width: 160px; height: 120px;" /> </a>
縮圖加上模糊效果
<a href="/images/pic_001.jpg" class="cloud-zoom" rel="softFocus: true, smoothMove:3, adjustX:10"> <img src="/images/pic_001.jpg" alt="cloud-zoom demo01" title="相片標題" style="width: 160px; height: 120px;" /> </a>
參數說明：
這個外掛有不少參數可以設定，使用的方法只要在<a>標籤中的rel屬性加上對應的參數就可以了，下面是參數列表，注意參數都不需要加單位，不然會發生錯誤。
| 參數 | 說明 (from V1.0.0) | 預設值 |
|---|---|---|
| zoomWidth | 放大圖的寬度，單位是px，如果不設定或者是設定auto，則會和縮圖一樣寬 | 'auto' |
| zoomHeight | 放大圖的高度，單位是px，如果不設定或者是設定auto，則會和縮圖一樣高 | 'auto' |
| position | 放大圖相對縮圖的位置，可以設定的值有'left', 'right', 'top', 'bottom', 'inside'，或者是可以指定網頁中一個元素的id，他就會出現在那個元素的位置上，例如<div id=element1></div> | 'right' |
| adjustX | 放大圖X軸的位置微調，單位是px | 0 |
| adjustY | 放大圖Y軸的位置微調，單位是px | 0 |
| tint | 縮圖上的遮罩顏色，必須使用RGB色碼表示，例如'#aa00aa'，不可以和softFocus參數一起使用。 | false |
| tintOpacity | 遮罩的透明度，0代表完全透明，1代表完全不透明 | 0.5 |
| lensOpacity | 放大鏡的透明度，0代表完全透明，1代表完全不透明，在tint及Soft-focus開啟的狀況下，會是完全透明的 | 0.5 |
| softFocus | 縮圖的模糊效果，設定為true或false，無法和tint同時啟用。 | false |
| smoothMove | 大圖在移動時的平滑效果，越高越平滑，如果設定為1表示最不平滑 | 3 |
| showTitle | 是否顯示圖檔標題，設定為true或false. | true |
| titleOpacity | 標題的透明度，0代表完全透明，1代表完全不透明 | 0.5 |