搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 JS程式語法 Cloud Zoom 具有四種強大展示效果的圖片放大鏡JQuery套 ...
byadmin 發表於 2013-6-5 02:35:09 , 17190人已閱讀 , 2人回應
之前已經介紹了 Anything Zoomer 這款優秀的放大鏡JQ效果套件 , 但是否覺得在圖片放大的效果上有些單調呢? 沒關係這次介紹一款完全針對圖片設計的放大鏡套件 Cloud Zoom , 它提供了四種放大鏡的展示效果 , 讓使用者有更多效果選擇 , 而且它js檔案只有小小6KB , 也是一款程式部分優化的相當好的實用套件 , 推薦給大家!

Cloud Zoom2.jpg

Cloud Zoom.jpg

Cloud Zoom 特色介紹


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

Cloud Zoom 使用教學


相簿模式 :參考語法
  1. <a href='大圖連結' class='cloud-zoom-gallery' title='自定義文字' rel="useZoom: 'zoom1', smallImage: '小圖連結' "><img class="zoom-tiny-image" src="相簿按鈕圖標" alt = "自定義文字"/></a>
複製代碼
遮色片模式:rel 中帶的參數分別為遮色片顏色、透明度、移動速度、框架大小、框架的Y軸與X軸的定位位移
  1. <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軸的定位位移
  1. <a href='大圖連結' class='cloud-zoom' rel="position:'inside',showTitle:false,adjustX:-4,adjustY:-4"><img src="小圖連結" title="自定義標題" here" alt=''自定義文字"/></a>
複製代碼
柔焦背景模式:rel 中帶的參數  softFocus: true = 呼叫柔焦背景模式 , position類型 , 彈出的圖片展示框中動態效果延遲時間 (數字設定越大,動作越慢)
  1. <a href='大圖連結' class='cloud-zoom' title="自定義標題" rel="softFocus: true, position:'anypos', smoothMove:2"><img src="小圖連結" alt='' /></a>

  2. //下方為自定義的圖片展示框 , 可自定義大小以及展示位置
  3. <div class="zoom-desc" style="position:relative">
  4.                         <div id="anypos" style="position:absolute;top:-128px; left: 128px;width:356px;height:256px;"></div>
複製代碼
其它美化部分以及程式碼部分 , 請自行下載範例參考囉 :)

cloud zoom.rar (492.4 KB, 下載次數: 321)

收藏回覆 只看該作者 道具 舉報

byOiZo@FB 發表於 2013-11-12 17:08:17
很棒的教學範例!想請問可用在移動裝置嗎?
我試了觸控螢幕的部份...好像不起作用耶

回覆 只看該作者 道具 舉報

byaxson75112 發表於 2013-11-28 22:01:23
很棒的教學

回覆 只看該作者 道具 舉報

Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:sr.design2011@gmail.com

, Processed in 0.086821 second(s), 41 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2024-11-24 07:26

回頂部