10個非常炫酷的jQuery相簿動畫賞析

本文由碼農網 – 小峰原創，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

我們經常可以在網頁上看到形式各異的jQuery相簿外掛，由於現在瀏覽器對HTML5和CSS3的相容越來越好了，所以很多jQuery相簿外掛都運用了CSS3的相關特性，形成了許多炫酷的動畫特效。本文收集了10個比較經典炫酷的jQuery相簿動畫，希望大家喜歡。

1、HTML5/CSS3圖片左右切換彈性動畫

這是一款很有特點的HTML5圖片切換動畫，點選左右按鈕即可將圖片進行彈性切換，圖片在被切換時，都會產生一定的彈性緩衝動畫效果。這款HTML5圖片應用非常適合在產品宣傳頁面上使用，看上起十分大氣。

線上演示        原始碼下載

2、jQuery/CSS3實現拼圖效果的相簿外掛

今天我們要來分享一款很酷的jQuery相簿外掛，首先相簿中的圖片會以一定的角度傾斜放置在頁面上，點選圖片縮圖就可以展開圖片，並且圖片是由所有縮圖拼接而成，圖片展開和收攏的動畫效果也非常不錯。當然圖片傾斜需要CSS3支援。

線上演示        原始碼下載

3、jQuery幻燈片播放器外掛 可自動播放圖片

今天我們要再介紹一個jQuery幻燈片播放器外掛，它的功能很齊全，不僅可以手動切換圖片，而且可以開啟和關閉自動播放圖片功能。另外，還可以展開縮圖列表迅速預覽所有圖片。

線上演示        原始碼下載

4、HTML5 3D相簿瀏覽 震撼人心

今天我們再來看一款HTML5 3D相簿瀏覽應用，圖片可以手動播放，也可以自動播放，效果非常震撼，趕緊把這款HTML5 3D相簿分享給你的朋友吧。

線上演示        原始碼下載

5、jQuery/CSS3動畫相簿圖片瀏覽外掛

今天這款jQuery相簿外掛正好彌補了動畫的缺陷，由於CSS3特性的利用，當我們點選圖片瀏覽的時候，縮圖就會以淡入淡出的動畫效果消失，然後出現原始圖片。同時你也可以點選左右按鈕來逐一瀏覽相簿中的圖片。

線上演示        原始碼下載

6、HTML5 TweenMax.js和jQuery實現的3D圖片動畫

TweenMax是一個很常用的動畫製作框架，TweenMax.js是TweenMax的JS版本，今天我們就結合TweenMax.js和HTML5來實現一款超炫的3D圖片牆動畫，幾張圖片圍成一個圍牆，然後圖片牆可以隨著滑鼠的移動而旋轉，旋轉速度可以根據滑鼠來變化，非常酷的HTML5 3D動畫應用。

線上演示        原始碼下載

7、jQuery/CSS3實現全屏圖片滑塊焦點圖動

今天我們要來分享一款非常大氣的jQuery/CSS3全屏焦點圖外掛，這款焦點圖有以下幾個特點：首先圖片可以全屏切換滑動，顯得非常大氣；其次焦點圖有縮圖導航，點選縮圖可以切換至相應的圖片；最後就是圖片有陰影，配合天空白雲的背景，像是浮動一樣，非常立體。

線上演示        原始碼下載

8、HTML5 3D立體圖片相簿

HTML5非常強大，尤其是和CSS3結合，有時候能達到非同凡響的網頁動畫效果。今天要分享的這款HTML5應用就是一款很酷的3D立體圖片相簿應用，它可以用滑鼠多拽從多個角度瀏覽相簿圖片，點選圖片，就可以放大圖片，相簿圖片都是美女，千萬別讓女朋友看到。

線上演示        原始碼下載

9、CSS3動畫相簿 圖片淡入淡出動畫效果

這是一款基於CSS3的動畫相簿，這樣的相簿我們之前也分享過不少，比如HTML5 3D立體圖片相簿。非常的華麗。今天的這款CSS3相簿相對比較實用，當滑鼠劃過縮圖時，原圖片即會以淡入淡出的動畫效果展現出來，大家可以將它應用在自己的網站上。

線上演示        原始碼下載

10、jQuery/CSS3相簿瀏覽外掛 相簿圖片濾鏡效果

這是一款基於jQuery和CSS3的超酷相簿瀏覽外掛，當我們滑過相簿圖片的縮圖時，圖片即會產生濾鏡效果，由灰色程式設計彩色，同時圖片周圍產生不錯的陰影效果。點選縮圖時，我們將開始瀏覽相簿的原始圖片，我們點選右上角的關閉按鈕即可回到相簿縮圖模式。

線上演示        原始碼下載

以上就是10個非常炫酷的jQuery相簿動畫賞析，希望對你有所幫助。