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