10款web前端超實(shí)用jQuery插件大合集
2014-12-25 藍(lán)藍(lán)設(shè)計(jì)的小編
藍(lán)藍(lán)設(shè)計(jì)( www.shtzxx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù).
每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)
來(lái)源：http://yidianzixun.com/home?page=article&id=06vnp7g9&up=0
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
1.HTML5截圖功能 可拖拽圖片
截圖在我們平常電腦應(yīng)用中非常的廣泛，包括開(kāi)發(fā)者和一般的使用用戶(hù)。今天介紹的這款HTML5截圖應(yīng)用可以幫助你在上傳頭像前截取自己的頭像，你只需要拖拽移動(dòng)圖片即可選中要截取的部分，HTML5會(huì)自動(dòng)將選取的圖片自動(dòng)生成一張新的圖片來(lái)保存，從而完成截圖的功能。另外，該HTML5截圖應(yīng)用還支持按住shift鍵實(shí)現(xiàn)圖片同比例縮放。
2.純CSS3動(dòng)畫(huà)按鈕效果 5種漂亮樣式
這次我們要來(lái)分享一款很不錯(cuò)的CSS3按鈕動(dòng)畫(huà)，這款CSS3按鈕一共有5種動(dòng)畫(huà)方式，每一種都是鼠標(biāo)滑過(guò)動(dòng)畫(huà)形式，雖然這些動(dòng)畫(huà)按鈕不是十分華麗，但是小編覺(jué)得不像其他按鈕那樣很難擴(kuò)展，我們可以修改CSS代碼隨意改變自己喜歡的顏色樣式。
3.使用 SVG 制作單選和多選框動(dòng)畫(huà)
通過(guò) JavaScript 實(shí)現(xiàn) SVG 路徑動(dòng)畫(huà)，我們可以做很多花哨的東西。今天我們要為您介紹一些復(fù)選框和單選按鈕效果。實(shí)現(xiàn)的主要思路是隱藏原生的輸入框，使用偽元素創(chuàng)造更具吸引力的樣式，輸入框被選中的時(shí)候執(zhí)行 SVG 動(dòng)畫(huà)。
4.使用 CSS3 偽元素實(shí)現(xiàn)照片堆疊效
CSS3 里引入的偽元素讓 Web 開(kāi)發(fā)人員能夠在不需要額外添加 HTML 標(biāo)簽的情況下制作出復(fù)雜的視覺(jué)效果。例如，:before 和 :after 這個(gè)兩個(gè) CSS3 偽元素就可以幫助你實(shí)現(xiàn)很多有趣的效果。本教程將告訴你如何使用 CSS3 為元素創(chuàng)建一組漂亮的圖片堆疊效果。
5.基于jquery的鼠標(biāo)經(jīng)過(guò)圖片列表
今天要給大家推薦一款基于jquery的鼠標(biāo)經(jīng)過(guò)圖片列表。當(dāng)鼠標(biāo)經(jīng)過(guò)列表圖片的時(shí)候，圖片放大，且有一個(gè)半透明的遮罩層隨之移動(dòng)。
6.基于 CSS3 & jQuery 的過(guò)濾和排序插件
MixItUp 是一款輕量，但功能強(qiáng)大的 jQuery 插件，提供了對(duì)分類(lèi)和有序內(nèi)容的美麗的動(dòng)畫(huà)過(guò)濾和排序功能。特別適合用于作品集網(wǎng)站，畫(huà)廊，圖片博客以及任何的分類(lèi)或有序內(nèi)容。它是如何工作的？ MixItUp 根據(jù)你的過(guò)濾條件決定哪些內(nèi)容隱藏，顯示或重新定位，然后應(yīng)用 CSS3 transitions 平滑動(dòng)畫(huà)到新位置。這是一個(gè)非常有效的方法，借助了現(xiàn)代瀏覽器的渲染能力，并避免過(guò)多的使用 jQuery 進(jìn)行 DOM 操作。
7.實(shí)現(xiàn)圖片的形狀遮罩和動(dòng)畫(huà)放大效果
今天，給大家分享來(lái)自 Quess 的如何實(shí)現(xiàn)圖片的形狀遮罩和放大動(dòng)畫(huà)效果。在很多作品集網(wǎng)站中，我們經(jīng)常能看到這樣的造型和效果。就個(gè)人而言，我覺(jué)得我們不能因?yàn)榕f的瀏覽器不支持，我們就放棄在項(xiàng)目中使用 HTML5 或者 CSS3 技術(shù)。我們應(yīng)該“獎(jiǎng)勵(lì)”使用現(xiàn)代瀏覽器的用戶(hù)，給他們一個(gè)更好的用戶(hù)體驗(yàn)。
8.CSS3 Animation Cheat Sheet：實(shí)用的 CSS3 動(dòng)畫(huà)庫(kù)
CSS3 Animation Cheat Sheet 是一組預(yù)設(shè)的動(dòng)畫(huà)庫(kù)，為您的 Web 項(xiàng)目添加各種很炫的動(dòng)畫(huà)。所有你需要做的是添加樣式表到你的網(wǎng)站，為你想要添加動(dòng)畫(huà)效果的元素應(yīng)用預(yù)制的 CSS 類(lèi)就可以了。
9.自適應(yīng)智能設(shè)備方向的視差效果插件
Parallax.js 是一個(gè)簡(jiǎn)單的，輕量級(jí)的的視差引擎，能夠?qū)χ悄茉O(shè)備的方向作出反應(yīng)。在沒(méi)有沒(méi)有陀螺儀或運(yùn)動(dòng)檢測(cè)硬件可用的時(shí)候，使用光標(biāo)的位置來(lái)代替。有很多的行為，你就可以設(shè)置為任何給定的視差實(shí)例。這些行為既可以通過(guò)在標(biāo)記中指定的數(shù)據(jù)屬性或通過(guò)構(gòu)造函數(shù) 和 JavaScript API 調(diào)用。
10.管理 CSS 動(dòng)畫(huà)的強(qiáng)大的小工具
Animo.js 是一個(gè)功能強(qiáng)大的小工具，用于管理 CSS 動(dòng)畫(huà)。它的特色功能包括像堆棧動(dòng)畫(huà)，創(chuàng)建跨瀏覽器的模糊，設(shè)置動(dòng)畫(huà)完成的回調(diào)等等。Animo 還包括驚人的 animate.css，為您提供了近60個(gè)美麗的動(dòng)畫(huà)，還加入了一些輔助動(dòng)畫(huà)到庫(kù)中。
掃一掃，案例分享帶回家（藍(lán)藍(lán)設(shè)計(jì)微信公眾平臺(tái)）
