搜索
SR數位設計 ECSHOP RWD響應式技術開發 JS程式語法 Anything Zoomer 快速製作圖片或文字放大鏡效果 ...
byadmin 發表於 2013-6-3 20:29:03 , 5128人已閱讀 , 1人回應
Anything Zoomer 是一款可以對區域內所有內容產生放大鏡效果的JQUERY特效,一般常看到的放大鏡效果多數是用於圖片上,但Anything Zoomer 不只能針對圖片產生放大鏡效果 , 也能夠讓文字以及表格產生放大效果 , 是不是很方便呢 , 下面先來看一下DEMO效果:
圖片放大鏡效果.jpg



Anything Zoomer 簡易教學


大家可以在下載範例後,在範例頁面中的Usage看到詳細教學內容 , 筆者在這只簡單講解一下 , 如何改變放大框大小 , 以及作用區域的範圍:

《放大框大小改變》
改變放大框,需要更改 .az-zoom 這條類別的CSS (anythingzoomer.css檔案中) , 可以看下文程式碼中註釋的部分 , 只需要改變 width 以及 height 即可:
  1. .az-zoom {
  2.         background: #fff;
  3.         border: #333 1px solid;
  4.         position: absolute;
  5.         top: 0;
  6.         left: 0;
  7.         width: 250px;   //放大框的寬度
  8.         height: 250px;  //放大框的高度
  9.         overflow: hidden;
  10.         z-index: 100;
  11.         display: none;
  12.         -moz-box-shadow: inset 0px 0px 4px #000;
  13.         -webkit-box-shadow: inset 0px 0px 4px #000;
  14.         box-shadow: inset 0px 0px 4px #000;
  15. }
複製代碼
《圖片大小改變》
Anything Zoomer 的圖片縮放效果是採用小圖以及原圖去製作出放大的效果,因此我們需要準備一張原始圖以及一張縮小圖,兩張圖片務必使用原圖縮放,以免放大效果產生錯位現象。另外我們還需要修改CSS檔案中原本對圖片大小的設定,改為我們自己準備的大小圖的圖片大小 (參考以下範例):
  1. .small img                                                                {
  2.         width: 512px;
  3.         height: 352px;
  4. }
  5. .large img                                                                {
  6.         width: 1280px;
  7.         height: 881px;
  8. }
複製代碼
以上兩個部分是客製化使用時最需要修改的兩個部分 , 提供給大家參考一下。

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

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP響應式技術開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:service@uniflow.com.tw 連絡電話03-3555-069 (時間AM10:00~PM7:30)

, Processed in 0.258960 second(s), 42 queries , Gzip On.

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

Core - DZ2.5 GMT+8, 2017-2-26 18:15

回頂部