首頁(yè)電商視覺(jué)設(shè)計(jì)技術(shù)文章正文

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

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

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

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

1、強(qiáng)大的CSS3動(dòng)畫(huà)庫(kù)animate.css 50多種動(dòng)畫(huà)形式

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

在線演示

源碼下載

2、新款CSS3按鈕組合 5組可愛(ài)CSS3按鈕

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

在線演示

源碼下載

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

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

在線演示

源碼下載

4、jQuery消息提示框插件Tipso

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

在線演示

源碼下載

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

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

在線演示

源碼下載

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

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

在線演示

源碼下載

7、CSS3圖片層疊展開(kāi)特效可展開(kāi)扇形效果

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

在線演示

源碼下載

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

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