Cloud Zoom 具有四種強大展示效果的圖片放大鏡JQuery套件

byadmin 發表於 2013-6-5 02:35:09 , 17185人已閱讀 , 2人回應

之前已經介紹了 Anything Zoomer 這款優秀的放大鏡JQ效果套件 , 但是否覺得在圖片放大的效果上有些單調呢? 沒關係這次介紹一款完全針對圖片設計的放大鏡套件 Cloud Zoom , 它提供了四種放大鏡的展示效果 , 讓使用者有更多效果選擇 , 而且它js檔案只有小小6KB , 也是一款程式部分優化的相當好的實用套件 , 推薦給大家！

DEMO

Cloud Zoom 特色介紹

兼容於大多數瀏覽器(IE6+, Firefox, Chrome, Opera, Safari).
易於結合HTML應用
圖片變焦時可帶標題
6KB檔案大小(min版)
平滑的變焦動作效果
相簿圖片切換模式
背景色調、背景柔焦、圖內變焦等功能
正常降級使用JS關閉不衝突

Cloud Zoom 使用教學

相簿模式：參考語法

<a href='大圖連結' class='cloud-zoom-gallery' title='自定義文字' rel="useZoom: 'zoom1', smallImage: '小圖連結' "><img class="zoom-tiny-image" src="相簿按鈕圖標" alt = "自定義文字"/></a>

複製代碼

遮色片模式：rel 中帶的參數分別為遮色片顏色、透明度、移動速度、框架大小、框架的Y軸與X軸的定位位移

<a href='大圖連結' class='cloud-zoom' rel="tint:'#000000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:480,adjustY:-4,adjustX:10"><img src="小圖連結" title="自定義圖片標題" alt=''自定義文字" /></a>

複製代碼

圖內焦點放大瀏覽模式：rel 中帶的參數 position:'inside' = 呼叫圖內顯示、showTitle:false 圖內標題顯示 (false不顯示true顯示)、焦點圖片X軸與Y軸的定位位移

<a href='大圖連結' class='cloud-zoom' rel="position:'inside',showTitle:false,adjustX:-4,adjustY:-4"><img src="小圖連結" title="自定義標題" here" alt=''自定義文字"/></a>

複製代碼

柔焦背景模式：rel 中帶的參數 softFocus: true = 呼叫柔焦背景模式 , position類型 , 彈出的圖片展示框中動態效果延遲時間 (數字設定越大,動作越慢)

<a href='大圖連結' class='cloud-zoom' title="自定義標題" rel="softFocus: true, position:'anypos', smoothMove:2"><img src="小圖連結" alt='' /></a>
//下方為自定義的圖片展示框 , 可自定義大小以及展示位置
<div class="zoom-desc" style="position:relative">
<div id="anypos" style="position:absolute;top:-128px; left: 128px;width:356px;height:256px;"></div>

複製代碼

其它美化部分以及程式碼部分 , 請自行下載範例參考囉 :)