20 個具有驚艷效果的 jQuery 圖像縮放插件
JQuery相對與Flash的魔力已經(jīng)貫穿整個網(wǎng)絡。盡管,F(xiàn)lash層被認為是用于網(wǎng)頁設(shè)計的***,然而隨著jQuery的出現(xiàn),以及他的酷似Flash的交互式特效使得網(wǎng)頁更加的優(yōu)雅——Flash開始靠邊站了。
相比笨重的Flash,使用jQuery可以輕松的創(chuàng)建復雜的自定義動畫效果以及提供友好的SEO,因此在兩者之間的選擇也就是明擺著的事兒了。
一些酷炫的jQuery 圖片效果,類似于不同方向滑入,輕松添加動畫,擲入、排序、放大效果,搖拍,圖片拍攝效果,滑動效果以及大量其他的僅僅需要少量編碼的特效使得jQuery稱為開發(fā)者和網(wǎng)站制作的***。
下面的jQuery插件對含有需要大量空間的巨型圖片的網(wǎng)站非常有用–通常有這樣沉重的圖像負載的網(wǎng)站,其加載過程會非常慢,但通過這些 jQuery 圖像插件,圖像不僅能夠用無限的特效呈現(xiàn)視覺刺激,而且頁面加載的速度也會達到標準。
這里介紹的是20個jQuery圖像縮放插件的演示,它們可以描繪出無數(shù)的圖像效果,可以被利用來為最終用戶提供一個更誘人的視覺體驗。享受它們吧!
1. ElevateZoom
ElevateZoom是一個可以輕松創(chuàng)建圖像縮放界面的高度可定制jQuery插件。它可以對一個單獨的高品質(zhì)圖像或兩幅圖像(一個縮略圖和一個高品質(zhì)版本)進行工作。縮放窗口可以放置在頁面(或圖像)的任何部分,還有一個選項可以內(nèi)置縮放以節(jié)約視覺空間。
2. Mlens
mlens,是一個很小的jQuery插件(minified 和 gzipped 之后只有約 1KB),簡化創(chuàng)建了這個放大鏡的很多功能。它有幾個參數(shù),如鏡片的形狀(圓形或方形)、鏡頭的尺寸,以及定制邊界的選項。它的多個實例可以用在同一頁 面,其WordPress插件正在開發(fā)中。
3. Cloud Zoom
Cloud Zoom 是許多高知名度的零售網(wǎng)站都使用的一個橫空出世的流行jQuery圖像縮放插件。持續(xù)改進,定期更新和技術(shù)支持使它成為那些為了客戶而需要一個成熟、可靠的jQuery圖像縮放解決方案的忙碌開發(fā)者們青睞的選擇。
4. Nivo Zoom
Nivo Zoom 是一個類似Lightbox但更為簡單的圖像縮放jQuery插件,來自流行的 Nivo Slider 的開發(fā)者。此插件是輕量級的(壓縮后只有4KB),只集中在圖像上,并配備了一堆的設(shè)置。它支持5種不同的變焦類型,并可以顯示圖像的標題(能很好處理長 文本)。
5. FancyBox
FancyBox 是一個可以為你網(wǎng)頁上的圖像、HTML內(nèi)容和多媒體提供漂亮和優(yōu)雅的縮放功能的工具。它建立在流行的JavaScript框架jQuery之上,易于實施和定制。
#p#
6. Zoomy
Zoomy 是一個快速和易于集成的插件,可以放大任何圖片。它是一個靈活的縮放插件,可以用于同一圖像的兩個拷貝,或者一個鏈接到其自身的圖像。大多數(shù)的CMS系統(tǒng) 會保存或創(chuàng)建同一圖像的多個尺寸版本,所以它可以被輕松設(shè)置。只需在所顯示的較小的圖像上鏈接較大的放大圖像,并告訴插件縮放時使用該鏈接即可。這只需要 一點點腳本。
7. EasyZoom
EasyZoom 是一個優(yōu)雅的、高度優(yōu)化的jQuery圖像放大和平移插件,它基于 Alen Grakalic 的工作。EasyZoom 支持觸摸式設(shè)備,并很容易用CSS定制。
8. jQuery Zoom
jQuery Zoom 是一個jQuery的小插件,用于在 mousedown 或 mouseover 時放大圖像。它已經(jīng)在 Firefox,Safari,Chrome,Internet Explorer 6、7、8、9,和 Opera 11 下測試通過。它遵循MIT協(xié)議發(fā)布。
9. Zoomooz.js
Zoomooz.js 是個易用的可以對任意網(wǎng)頁元素進行放大的jQuery插件。你只要對任意 HTML 元素添加名為“zoomTarget”的class,就可以對其添加放大效果。放大可以通過點擊body來重置。它在Internet Explorer 9, Safari 3+, Firefox 3.6+, Opera 和 Chrome 上測試通過。
10. Easy Image Zoom
Easy Image Zoom 是一個輕量極的 jQuery 插件,允許用戶在中等尺寸的圖像上移動鼠標時看到更大的細節(jié)。它可以通過幾個選項和簡單的CSS定義實現(xiàn)定制。它適用于需要產(chǎn)品圖像放大的項目。
#p#
11. jPhotoGrid
jPhotoGrid 接收一個簡單的圖像和標題列表,然后把它們變成一個可被查看和縮放的照片網(wǎng)格。幾乎這個插件所有的風格都是在CSS中定義的,訣竅是通過浮動 (float)列表項來布局網(wǎng)格。該插件將做的***件事,就是把這些都絕對定位。這就是為什么插件能在一個單獨的圖像上放大然后把它返回到它原來的地方。
12. jZoom Evolution
jQZoom Evolution(進化)是一個有全部功能的 jQZoom 的新版本。它是一個建立在流行的 JavaScript 框架 jQuery 之上的 JavaScript 圖像放大鏡。它正是你所需要的放大鏡腳本,很棒而且非常易用。它很容易定制,并能在所有時髦瀏覽器中工作。本軟件按GPL協(xié)議授權(quán)使用。你可以在你的網(wǎng)站 上使用 jQZoom,無論是電子商務網(wǎng)站還是任何其它類型。
13. Fresco
Fresco(壁畫)是一個美麗的響應式燈箱。它能夠在每種設(shè)備上的所有瀏覽器中創(chuàng)造驚人的覆蓋,并在任何尺寸的屏幕上***工作。更為驚艷的是它還 可以全 屏縮放,有支持視網(wǎng)膜技術(shù)的皮膚,支持刷卡事件,為HTML5視頻集成了YouTube和Vimeo,有強大的JavaScript API。
14. jQuery Snipe
Snipe 是一個可以給圖片加上狙擊鏡風格的 jQuery 縮放插件。當鼠標在圖片上滑過時,Snipe 會在鼠標位置加上實時放大效果,就好像你拿著AWP端詳你的獵物。
15. ZoomImage
用個性方式表現(xiàn)你的圖像。指向圖像的鏈接被悄悄劫持了,取而代之的是在頁面內(nèi)彈出的帶有陰影和邊框的DIV里顯示圖像。
#p#
16. Mosaiqy
Mosaiqy是一個用于查看和縮放照片的jQuery插件,工作于Opera9+,火狐3.6+,Safari3.2+,Chrome和 IE7+。照片 是從一個JSON/JSONP數(shù)據(jù)結(jié)構(gòu)中檢索的,隨機在網(wǎng)格內(nèi)移動。在***的瀏覽器中使用CSS3過渡通過你的GPU接管所有昂貴的動畫,***限度地減少 CPU開銷。 (對于技術(shù)細節(jié)請參見GitHub項目的README文件)。
17. Anything Zoomer
Anything Zoomer 給你的圖片提供一個近距離放大視圖。
18. jQuery gZoom Plugin
它有如下特點:點擊“+”和“-”按鈕縮放;可以在圖像上用鼠標滾輪拖動滑動條來變級縮放;放大后在圖像上移動鼠標可以平移;點擊圖像可以用 lightbox 風格顯示全圖。
19. Leroy Zoom
小于 4KB 的一個輕量和易于使用的圖像放大jQuery插件。
20. ImageLens
Imagelens 可以讓你為圖像添加透鏡式放大效果。
原文鏈接:http://codegeekz.com/20-jquery-image-zoom-plugins-for-stunning-effects/
譯文鏈接:http://www.oschina.net/translate/20-jquery-image-zoom-plugins-for-stunning-effects