UI培訓(xùn)之8個(gè)超實(shí)用的jQuery插件應(yīng)用

更新時(shí)間:2016年03月14日17時(shí)50分來源:傳智播客UI培訓(xùn)學(xué)院瀏覽次數(shù):

8個(gè)超實(shí)用的jQuery插件應(yīng)用

自jQuery誕生以來，jQuery社區(qū)都在不斷地、自發(fā)地為jQuery創(chuàng)建許許多多功能不一的插件應(yīng)用，很多jQuery插件非常實(shí)用，對我們的前端開發(fā)幫助相當(dāng)大，不僅可以更完美的完成指定功能，而且節(jié)省時(shí)間，稍作配置或修改就可以上線。本文收集了8個(gè)超實(shí)用的jQuery插件應(yīng)用，希望對你有所幫助。

1、強(qiáng)大的CSS3動畫庫animate.css 50多種動畫形式

今天要給大家介紹一款強(qiáng)大的CSS3動畫庫animate.css，animate.css定義了大概50多種動畫形式，包括淡入淡出，文字飛入、左右搖擺動畫等等。使用animate.css也非常簡單，你可以給頁面上的任意元素，特別是文字添加各種神奇的動畫特效，一起來嘗試一下吧。

在線演示

源碼下載

2、新款CSS3按鈕組合 5組可愛CSS3按鈕

今天就再來分享一款可愛的CSS3按鈕組合，該CSS3按鈕一共有5種不同的風(fēng)格，有幾款還有3D立體的效果。一起來欣賞這些可愛的CSS3按鈕吧。

在線演示

源碼下載

3、jQuery仿Android鎖屏圖案應(yīng)用插件

在Android應(yīng)用中，我們經(jīng)常會使用一種鎖屏應(yīng)用軟件，你需要輸入正確的連線順序才能解開Android屏幕桌面。今天這次我們要利用jQuery來實(shí)現(xiàn)這種鎖屏功能，例子中提供了很多種鎖屏方式，也可以自定義矩陣來增加鎖屏的難度。

在線演示

源碼下載

4、jQuery消息提示框插件Tipso

之前我們分享過很多漂亮的Tooltip提示框插件，比如這款帶Tooltip表單驗(yàn)證的注冊表單。今天要分享的這款jQuery消息提示框插件名叫Tipso，它的特點(diǎn)是可以定義提示框的顯示位置，以及動態(tài)改變提示框的提示內(nèi)容，應(yīng)該說是一款相當(dāng)靈活的jQuery消息提示框插件。

在線演示

源碼下載

5、jQuery實(shí)現(xiàn)美化版的單選框和復(fù)選框

今天這款是利用jQuery實(shí)現(xiàn)的美化版單選框和復(fù)選框，樣式風(fēng)格非常簡潔清爽，是一款很不錯(cuò)的jQuery按鈕插件。

在線演示

源碼下載

6、簡潔美觀的jQuery計(jì)算器插件

今天小編要為大家分享一款基于jQuery的計(jì)算器插件，這款jQuery計(jì)算器插件跟之前分享的jQuery實(shí)現(xiàn)簡易的計(jì)算器程序相比外觀更加簡潔和美觀，計(jì)算器的功能上也比那款強(qiáng)大。有興趣的同學(xué)可以繼續(xù)為這款計(jì)算器擴(kuò)展功能，應(yīng)該也不是難事。

在線演示

源碼下載

7、CSS3圖片層疊展開特效可展開扇形效果

今天要分享的這款CSS3圖片特效沒有那么絢麗，它的功能非常簡單，當(dāng)你把鼠標(biāo)移到圖片上時(shí)，多張圖片便會由原先的疊在一起變成展開狀態(tài)，展開過程中伴隨CSS3動畫，展開的形狀是扇形。這款簡單的CSS3圖片層疊展開動畫可以應(yīng)用在圖片展示和圖片分享上。

在線演示

源碼下載

8、純CSS3進(jìn)度條華麗5色進(jìn)度條示例

這是一款利用純CSS3實(shí)現(xiàn)的進(jìn)度條，它的實(shí)現(xiàn)非常簡單，沒有復(fù)雜的動畫，該CSS3進(jìn)度條最大的特點(diǎn)是擁有非常漂亮的5種顏色，整個(gè)進(jìn)度條看上去非常專業(yè)。這款CSS3進(jìn)度條和之前的CSS3 3D進(jìn)度條相比顯得更簡單易用。