讓人心動的jQuery外掛和HTML5動畫

---

在之前的分享中，有不少是關於jQuery和CSS3相關的應用和外掛，特別是基於jQuery的，相容性非常不錯，你也可以在jQuery外掛這個欄目中尋找自己需要的外掛。這裡我們精選了一些讓人心動的jQuery外掛和HTML5動畫，分享給大家。

1、jQuery/CSS3帶表單的下拉選單

今天要分享一款基於jQuery和CSS3的下拉選單，這款jQuery下拉選單非常特別，我們直接可以在下拉選單中填寫聯絡表單、登入表單。而且整個下拉選單的外觀是木質視覺效果的，所以選單顯得非常端莊大氣，這款jQuery下拉選單可以在你的個人網站中使用。

線上演示 原始碼下載

2、HTML5 Canvas Google電吉他 支援鍵盤彈奏

這是當年Google為紀念萊斯·保羅而設計的Google首頁Logo，它利用HTML5技術實現了電吉他彈奏效果。這款HTML5電吉他不僅可以滑鼠滑過琴絃發出音樂聲，而且可以利用鍵盤來彈奏出美妙的樂章，懂音律的朋友可以彈奏一下試試。

線上演示 原始碼下載

3、jQuery自定義Loading動畫外掛spin.js

spin.js是一款基於jQuery的Loading動畫外掛，和之前分享的CSS3Loading動畫應用不同的是，這款Loading動畫是基於jQuery的，意味著相容性更好；還有就是這款Loading動畫是可以自定義引數的，比如半徑、旋轉速度等都可以通過右側的滑桿來設定。

線上演示 原始碼下載

4、HTML5折線圖表Aristochart 圖表配置簡單

之前我已經向大家分享了幾款HTML5圖表應用，HTML5 Canvas圖表應用RGraph、HTML5Canvas餅狀圖表。利用這些HTML5圖表可以很方便的展示各種資料，而且非常直觀。今天要向大家分享一款HTML5折線圖表外掛Aristochart，Aristochart擴充套件非常靈活，配置也比較簡單，是一款很實用的HTML5圖表應用。

線上演示1線上演示2線上演示3線上演示4原始碼下載

5、jQuery/CSS3圖片翻轉特效 可水平垂直翻轉

這是一款基於jQuery和CSS3的圖片翻轉特效，每一張圖片都有文字標題懸浮在圖片上，點選切換按鈕，每一張圖片均會進行水平或者垂直翻轉，翻轉效果非常酷，有3D立體的視覺效果。CSS3的運用讓這些圖片都顯得十分精神。

線上演示 原始碼下載

6、HTML5 Canvas字母文字顆粒動畫 可設定重力感應

網頁文字在一般情況下只能設定顏色、大小、粗細等基本的特徵，但是利用HTML5技術，我們可以讓網頁文字變得更加絢麗和動感。今天要分享的這款HTML5Canvas字母文字動畫效果很不錯，它可以讓26個英文字母實現顆粒跳動的效果，你不僅可以設定需要播放動畫的字母，也可以設定不同的效果方式，而且也可以設定重力感應效果，是一款非常不錯的HTML5文字特效。

線上演示 原始碼下載

7、jQuery自動過濾單詞外掛

這是一款相當實用的jQuery應用外掛，這款jQuery外掛的功能是過濾單詞，當我們在輸入框中輸入單詞的時候，系統即會自動過濾出符合輸入字元的單詞，單詞的匹配速度非常快，你可以預先定義好一些片語，然後用這款jQuery外掛來過濾選詞。

線上演示 原始碼下載

jQuery非常強大，後續我們仍然會分享一些最新的jQuery外掛和HTML5應用，歡迎關注。

本文作者：html5tricks – 超人