10款web前端超實用jQuery外掛程式大合集

標籤：style   blog   http   io   ar   os   使用   sp   java   

出自：http://www.cnblogs.com/i7758/p/4111826.html

 

1.HTML5功能 可拖拽圖片

在我們平常電腦應用中非常的廣泛，包括開發人員和一般的使用使用者。今天介紹的這款HTML5應用可以協助你在上傳頭像前截取自己的頭像，你只需要拖拽移動圖片即可選中要截取的部分，HTML5會自動將選取的圖片自動產生一張新的圖片來儲存，從而完成的功能。另外，該HTML5應用還支援按住shift鍵實現圖片同比例縮放。

線上示範

源碼下載

2.純CSS3動畫按鈕效果 5種漂亮樣式

這次我們要來分享一款很不錯的CSS3按鈕動畫，這款CSS3按鈕一共有5種動畫方式，每一種都是滑鼠滑過動畫形式，雖然這些動畫按鈕不是十分華麗，但是小編覺得不像其他按鈕那樣很難擴充，我們可以修改CSS代碼隨意改變自己喜歡的顏色樣式。

線上示範

源碼下載

3.使用 SVG 製作單選和多選框動畫

通過 JavaScript 實現 SVG 路徑動畫，我們可以做很多花哨的東西。今天我們要為您介紹一些複選框和選項按鈕效果。實現的主要思路是隱藏原生的輸入框，使用虛擬元素創造更具吸引力的樣式，輸入框被選中的時候執行 SVG 動畫。

線上示範

源碼下載

4.使用 CSS3 虛擬元素實現照片堆疊效

CSS3 裡引入的虛擬元素讓 Web 開發人員能夠在不需要額外添加 HTML 標籤的情況下製作出複雜的視覺效果。例如，:before 和 :after 這個兩個 CSS3 虛擬元素就可以協助你實現很多有趣的效果。本教程將告訴你如何使用 CSS3 為元素建立一組漂亮的圖片堆疊效果。

線上示範

源碼下載

5.基於jquery的滑鼠經過圖片列表特效

今天要給大家推薦一款基於jquery的滑鼠經過圖片列表特效。當滑鼠經過列表圖片的時候，圖片放大，且有一個半透明的遮罩層隨之移動。

線上示範

源碼下載

6.基於 CSS3 & jQuery 的過濾和排序外掛程式

MixItUp 是一款輕量，但功能強大的 jQuery 外掛程式，提供了對分類和有序內容的美麗的動畫過濾和排序功能。特別適合用於作品集網站，畫廊，圖片部落格以及任何的分類或有序內容。它是如何工作的？ MixItUp 根據你的過濾條件決定哪些內容隱藏，顯示或重新置放，然後應用 CSS3 transitions 平滑動畫到新位置。這是一個非常有效方法，藉助了現代瀏覽器的渲染能力，並避免過多的使用 jQuery 進行 DOM 操作。

線上示範

源碼下載

7.實現圖片的形狀遮罩和動畫放大效果

今天，給大家分享來自 Quess 的如何?圖片的形狀遮罩和放大動畫效果。在很多作品集網站中，我們經常能看到這樣的造型和效果。就個人而言，我覺得我們不能因為舊的瀏覽器不支援，我們就放棄在項目中使用 HTML5 或者 CSS3 技術。我們應該“獎勵”使用現代瀏覽器的使用者，給他們一個更好的使用者體驗。

線上示範

源碼下載

8.CSS3 Animation Cheat Sheet：實用的 CSS3 動畫庫

CSS3 Animation Cheat Sheet 是一組預設的動畫庫，為您的 Web 項目添加各種很炫的動畫。所有你需要做的是添加樣式表到你的網站，為你想要添加動畫效果的元素應用預製的 CSS 類就可以了。

線上示範

源碼下載

9.自適應智慧型裝置方向的視差效果外掛程式

Parallax.js 是一個簡單的，輕量級的的視差引擎，能夠對智慧型裝置的方向作出反應。在沒有沒有陀螺儀或運動檢測硬體可用的時候，使用游標的位置來代替。有很多的行為，你就可以設定為任何給定的視差執行個體。這些行為既可以通過在標記中指定的資料屬性或通過建構函式 和 JavaScript API 呼叫。

線上示範

源碼下載

10.管理 CSS 動畫的強大的小工具

Animo.js 是一個功能強大的小工具，用於管理 CSS 動畫。它的特色功能包括像堆棧動畫，建立跨瀏覽器的模糊，設定動畫完成的回調等等。Animo 還包括驚人的 animate.css，為您提供了近60個美麗的動畫，還加入了一些輔助動畫到庫中。

線上示範

源碼下載

複製去Google翻譯翻譯結果 

10款web前端超實用jQuery外掛程式大合集