20 個具有驚艷效果的 jQuery 圖像縮放插件

jopen 10年前發布 | 18K 次閱讀 jQuery插件

jQuery相對與Flash的魔力已經貫穿整個網絡。盡管，Flash層被認為是用于網頁設計的首選，然而隨著jQuery的出現，以及他的酷似Flash的交互式特效使得網頁更加的優雅——Flash開始靠邊站了。

相比笨重的Flash，使用jQuery可以輕松的創建復雜的自定義動畫效果以及提供友好的SEO，因此在兩者之間的選擇也就是明擺著的事兒了。

一些酷炫的jQuery 圖片效果，類似于不同方向滑入，輕松添加動畫，擲入、排序、放大效果，搖拍，圖片拍攝效果，滑動效果以及大量其他的僅僅需要少量編碼的特效使得jQuery稱為開發者和網站制作的首選。

下面的jQuery插件對含有需要大量空間的巨型圖片的網站非常有用–通常有這樣沉重的圖像負載的網站，其加載過程會非常慢，但通過這些 jQuery 圖像插件，圖像不僅能夠用無限的特效呈現視覺刺激，而且頁面加載的速度也會達到標準。

這里介紹的是20個jQuery圖像縮放插件的演示，它們可以描繪出無數的圖像效果，可以被利用來為最終用戶提供一個更誘人的視覺體驗。享受它們吧！

1. ElevateZoom

ElevateZoom是一個可以輕松創建圖像縮放界面的高度可定制jQuery插件。它可以對一個單獨的高品質圖像或兩幅圖像（一個縮略圖和一個高品質版本）進行工作。縮放窗口可以放置在頁面（或圖像）的任何部分，還有一個選項可以內置縮放以節約視覺空間。

2. Mlens

mlens，是一個很小的jQuery插件（minified 和 gzipped 之后只有約 1KB），簡化創建了這個放大鏡的很多功能。它有幾個參數，如鏡片的形狀（圓形或方形）、鏡頭的尺寸，以及定制邊界的選項。它的多個實例可以用在同一頁面，其WordPress插件正在開發中。

3. Cloud Zoom

Cloud Zoom 是許多高知名度的零售網站都使用的一個橫空出世的流行jQuery圖像縮放插件。持續改進，定期更新和技術支持使它成為那些為了客戶而需要一個成熟、可靠的jQuery圖像縮放解決方案的忙碌開發者們青睞的選擇。

4. Nivo Zoom

Nivo Zoom 是一個類似Lightbox但更為簡單的圖像縮放jQuery插件，來自流行的 Nivo Slider 的開發者。此插件是輕量級的（壓縮后只有4KB），只集中在圖像上，并配備了一堆的設置。它支持5種不同的變焦類型，并可以顯示圖像的標題（能很好處理長文本）。

5. FancyBox

FancyBox 是一個可以為你網頁上的圖像、HTML內容和多媒體提供漂亮和優雅的縮放功能的工具。它建立在流行的JavaScript框架jQuery之上，易于實施和定制。

6. Zoomy

Zoomy 是一個快速和易于集成的插件，可以放大任何圖片。它是一個靈活的縮放插件，可以用于同一圖像的兩個拷貝，或者一個鏈接到其自身的圖像。大多數的CMS系統會保存或創建同一圖像的多個尺寸版本，所以它可以被輕松設置。只需在所顯示的較小的圖像上鏈接較大的放大圖像，并告訴插件縮放時使用該鏈接即可。這只需要一點點腳本。

7. EasyZoom

EasyZoom 是一個優雅的、高度優化的jQuery圖像放大和平移插件，它基于 Alen Grakalic 的工作。EasyZoom 支持觸摸式設備，并很容易用CSS定制。

8. jQuery Zoom

jQuery Zoom 是一個jQuery的小插件，用于在 mousedown 或 mouseover 時放大圖像。它已經在 Firefox，Safari，Chrome，Internet Explorer 6、7、8、9，和 Opera 11 下測試通過。它遵循MIT協議發布。

9. Zoomooz.js

Zoomooz.js 是個易用的可以對任意網頁元素進行放大的jQuery插件。你只要對任意 HTML 元素添加名為“zoomTarget”的class，就可以對其添加放大效果。放大可以通過點擊body來重置。它在Internet Explorer 9, Safari 3+, Firefox 3.6+, Opera 和 Chrome 上測試通過。

10. Easy Image Zoom

Easy Image Zoom 是一個輕量極的 jQuery 插件，允許用戶在中等尺寸的圖像上移動鼠標時看到更大的細節。它可以通過幾個選項和簡單的CSS定義實現定制。它適用于需要產品圖像放大的項目。

11. jPhotoGrid

jPhotoGrid 接收一個簡單的圖像和標題列表，然后把它們變成一個可被查看和縮放的照片網格。幾乎這個插件所有的風格都是在CSS中定義的，訣竅是通過浮動（float）列表項來布局網格。該插件將做的第一件事，就是把這些都絕對定位。這就是為什么插件能在一個單獨的圖像上放大然后把它返回到它原來的地方。

12. jZoom Evolution

jQZoom Evolution（進化）是一個有全部功能的 jQZoom 的新版本。它是一個建立在流行的 JavaScript 框架 jQuery 之上的 JavaScript 圖像放大鏡。它正是你所需要的放大鏡腳本，很棒而且非常易用。它很容易定制，并能在所有時髦瀏覽器中工作。本軟件按GPL協議授權使用。你可以在你的網站上使用 jQZoom，無論是電子商務網站還是任何其它類型。

13. Fresco

Fresco（壁畫）是一個美麗的響應式燈箱。它能夠在每種設備上的所有瀏覽器中創造驚人的覆蓋，并在任何尺寸的屏幕上完美工作。更為驚艷的是它還可以全屏縮放，有支持視網膜技術的皮膚，支持刷卡事件，為HTML5視頻集成了油Tube和Vimeo，有強大的JavaScript API。

14. jQuery Snipe

Snipe 是一個可以給圖片加上狙擊鏡風格的 jQuery 縮放插件。當鼠標在圖片上滑過時，Snipe 會在鼠標位置加上實時放大效果，就好像你拿著AWP端詳你的獵物。

15. ZoomImage

用個性方式表現你的圖像。指向圖像的鏈接被悄悄劫持了，取而代之的是在頁面內彈出的帶有陰影和邊框的DIV里顯示圖像。

16. Mosaiqy

Mosaiqy是一個用于查看和縮放照片的jQuery插件，工作于Opera9+，火狐3.6+，Safari3.2+，Chrome和IE7+。照片是從一個JSON/JSONP數據結構中檢索的，隨機在網格內移動。在最新的瀏覽器中使用CSS3過渡通過你的GPU接管所有昂貴的動畫，最大限度地減少 CPU開銷。（對于技術細節請參見GitHub項目的README文件）。