Anything Zoomer 快速製作圖片或文字放大鏡效果

byadmin 發表於 2013-6-3 20:29:03 , 14338人已閱讀 , 1人回應

Anything Zoomer 是一款可以對區域內所有內容產生放大鏡效果的JQUERY特效，一般常看到的放大鏡效果多數是用於圖片上，但Anything Zoomer 不只能針對圖片產生放大鏡效果 , 也能夠讓文字以及表格產生放大效果 , 是不是很方便呢 , 下面先來看一下DEMO效果：

DEMO

Anything Zoomer 簡易教學

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

《放大框大小改變》
改變放大框，需要更改 .az-zoom 這條類別的CSS (anythingzoomer.css檔案中) , 可以看下文程式碼中註釋的部分 , 只需要改變 width 以及 height 即可：

.az-zoom {
background: #fff;
border: #333 1px solid;
position: absolute;
top: 0;
left: 0;
width: 250px; //放大框的寬度
height: 250px; //放大框的高度
overflow: hidden;
z-index: 100;
display: none;
-moz-box-shadow: inset 0px 0px 4px #000;
-webkit-box-shadow: inset 0px 0px 4px #000;
box-shadow: inset 0px 0px 4px #000;
}

複製代碼

《圖片大小改變》
Anything Zoomer 的圖片縮放效果是採用小圖以及原圖去製作出放大的效果，因此我們需要準備一張原始圖以及一張縮小圖，兩張圖片務必使用原圖縮放，以免放大效果產生錯位現象。另外我們還需要修改CSS檔案中原本對圖片大小的設定，改為我們自己準備的大小圖的圖片大小 (參考以下範例)：

.small img {
width: 512px;
height: 352px;
}
.large img {
width: 1280px;
height: 881px;
}

複製代碼

以上兩個部分是客製化使用時最需要修改的兩個部分 , 提供給大家參考一下。

DOWNLOAD

jquery, 放大鏡, 圖片特效

喜歡1