網頁設計

關於網頁設計的技術或相關資訊分享

Jquery Cloud Zoom 放大鏡效果

  有時在做網頁設計時,客戶的品是需要展示細節的,例如珠寶類,可是由於版面考量圖片又沒辦法太大,這時候又需要展示細節,該怎麼辦呢?今天就來介紹這款放大鏡外掛,也是個很不錯用的外掛。

外掛基本資料

外掛名稱:Cloud Zoom

版本:1.0.2

作者網站:點我連結

下載連結:Cloud Zoom

引用檔案:jquery 1.4.2

範例:

不囉嗦先看範例

 

 

cloud-zoom demo01 單純放大。
cloud-zoom demo01 縮圖上加上遮罩。
cloud-zoom demo01 原地放大。
cloud-zoom demo01 縮圖加上模糊效果。

使用方法:

先載入需要的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

Please enable the javascript to submit this form