1. 程式人生 > >老司機總結的Jq外掛,挺不錯的,跟大家分享一下

老司機總結的Jq外掛,挺不錯的,跟大家分享一下

整理一些常用的JS庫,其中大多數是jQuery相關外掛,也有Bootstrap輔助外掛及非jQuery外掛。其功能涉及:頁面佈局、圖片幻燈片播放、圖片像冊展示、功能輔助等內容。本篇只是簡單介紹外掛功能,以後使用到相關外掛時再補充介紹外掛使用方法的文章。

jQuery Easing:jQuery 動畫效果擴充套件
jQuery Migrate:jQuery 應用遷移輔助外掛
Modernizr:專為HTML5和CSS3開發的功能檢測類庫
jQuery Flexslider:響應式 jQuery 內容滾動外掛
WOW:在頁面滾動時展現動感的元素動畫效果
Sticky:讓某個元素一直浮動在頁面某個位置
Bootstrap Hover Dropdown:Bootstrap滑鼠懸停自動下拉

jQuery Stellar:基於jQuery的視差滾動外掛
Owl Carousel:強大實用的jQuery幻燈片外掛
YTPlayer:基於jQuery的YouTube視訊播放外掛
jQuery Waypoints:jQuery滾動監聽外掛
easyPieChart:輕量級的圖表外掛
Isotope:jQuery智慧佈局外掛
jQuery imagesLoaded:jQuery圖片載入外掛
jQuery Countdown:精確到毫秒的jquery倒計時外掛
jQuery Counterup:jQuery數字動態累加jQuery
jqBootstrapValidation:用於Bootstrap表單的JQuery驗證框架

jQuery Revolution Slider:強大的視差響應幻燈外掛

1. jQuery Easing:jQuery 動畫效果擴充套件
jQuery API提供了簡單的動畫效果如淡入淡出以及自定義動畫效果,jQuery Easing(jquery.easing.js)是一款jQuery動畫效果擴充套件增強外掛,使用該外掛可以實現直線勻速運功、變加速運動、緩衝等豐富的動畫效果。

jQuery Easing是一款比較老的jQuery外掛,在很多網站都有應用,尤其是在一些頁面滾動、幻燈片切換等場景應用比較多。它非常小巧,且有多種動畫方案供選擇,使用簡單,而且免費。


2. jQuery Migrate:jQuery 應用遷移輔助外掛

jQuery 版本之間有區別。比如1.9版本對於 live(),die(),toggle(),sub(),$.browser 等等都已經不支援了。 在不改變你網站程式碼的同時,要使用 1.9 之後的版本,你需要使用 jQuery migrate(jquery-migrate)進行轉移、過度。


3. Modernizr:專為HTML5和CSS3開發的功能檢測類庫
Modernizr(moderniz.js)是一個開源的JS庫,它使得那些基於訪客瀏覽器的不同(指對新標準支援性的差異)而開發不同級別體驗的設計師的工作變得更為簡單。它使得設計師可以在支援HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進行開發,同時又不會犧牲其他不支援這些新技術的瀏覽器的控制。

當你在網頁中嵌入Modernizr的指令碼時,它會檢測當前瀏覽器是否支援CSS3的特性,比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等,同時也會檢測是否支援HTML5的特性——比如audio、video、本地儲存、和新的 標籤的型別和屬性等。在獲取到這些資訊的基礎上,你可以在那些支援這些功能的瀏覽器上使用它們,來決定是否建立一個基於JS的fallback,或者對那些不支援的瀏覽器進行簡單的優雅降級。另外,Modernizr還可以令IE支援對HTML5的元素應用CSS樣式,這樣開發者就可以立即使用這些更富有語義化的標籤了。


4. jQuery Flexslider:響應式 jQuery 內容滾動外掛
Flexslider(jquery.flexslider.js)是一款輕量的響應式基於jQuery的內容滾動外掛。Flexslider能夠幫助你在專案輕鬆的建立漂亮的內容滾動效果。這款外掛曾經連續多年入選 WDL 的年度最佳 jQuery 外掛,值得大家在網站開發中試試。它能讓你輕鬆的建立內容滾動的效果,具有非常高的可定製性。開發者可以使用Flexslider輕鬆建立各種圖片輪播效果、焦點圖效果、圖文混排滾動效果。


5. WOW:在頁面滾動時展現動感的元素動畫效果
在一些網頁上,當你滾動頁面的時候會看到各式各樣的元素動畫效果,非常動感。WOW.js 就是一款幫助你實現這種 CSS 動畫效果的外掛,很容易定製,你可以改變動畫設定喜歡的風格、延遲、長度、偏移和迭代等。

Wow.js 允許使用者滾動頁面的時候展示 CSS 動畫。預設的,使用者可以使用它來出發 animate.css 動畫。但是使用者也可以非常容易修改設定喜歡的動畫庫。Wow.js 比其他 JavaScript 視差外掛小,類似 Scrollorama(這個非常華麗,但是也更繁雜)。Wow.js 非常容易安裝和使用。如果你使用 Wow.js,你可以非常快的啟動,執行程式碼。


6. Sticky:讓某個元素一直浮動在頁面某個位置
Sticky(sticky.js)一個jQuery外掛,使你能夠做任何元素在您的網頁上總是可見的。jQuery Sticky可以讓任意元素固定在頁面的某個且保持可見。可以作為頂部固定導航顯示外掛,滾動網頁下來,保持處理滾動元件在檢視中,並不會因為頁面滾動而消失,也不會被其他元素覆蓋。


7. Bootstrap Hover Dropdown:Bootstrap滑鼠懸停自動下拉
Bootstrap Hover Dropdown(bootstrap-hover-dropdown.js)外掛,用於滑鼠懸停時使dropdown元素下拉,增強使用者體驗


8. jQuery Stellar:基於jQuery的視差滾動外掛
jQuery Stellar( Stellar.js)能幫助輕鬆的實現網頁視差滾動效果,提供任何滾動元素的視差滾動效應。只需給標籤新增data屬性,然後執行$.stellar()就可以實現酷炫的視差滾動了


9. Owl Carousel:強大實用的jQuery幻燈片外掛
Owl Carousel( owl.carousel.js)是一個強大、實用但小巧的 jQuery 幻燈片外掛,它具有以下特點:相容所有瀏覽器、支援響應式、支援 CSS3 過度、支援觸控事件、支援 JSON 及自定義 JSON 格式、支援進度條、支援自定義事件、支援延遲載入、支援自適應高度等


10. YTPlayer:基於jQuery的YouTube視訊播放外掛
YTPlayer(jquery.mb.YTPlayer.js)是一款基於jQuery的YouTube視訊播放外掛 這個外掛能在讓你在你的網站播放你喜歡的YouTube視訊,或把你的YouTube視訊做為你網站的HTML背景。不過這個外掛在天朝似乎意義不大。


11. jQuery Waypoints:jQuery滾動監聽外掛
jQuery Waypoints(Waypoints.js)是一款用於捕獲各種滾動事件的外掛。 使用Waypoints.js可以在使用者滾動滑條的時候,就能觸發各種各樣的動態效果。比如圖片浮現、文字漂移等各種各樣的動畫等。同時Waypoints還支援固定元素和無限滾動的功能,功力十分強大。

外掛介紹:一個元素滾動監聽外掛 Waypoints


12. easyPieChart:輕量級的圖表外掛
jQuery East Pie Chart(easypiechart.js)是一個輕量級的jQuery外掛,主要用來渲染和製作漂亮的餅圖及動畫效果,基於與HTML5的canvas元素。您可以通過一組這些選項的初始化函式來設定一個自定義的行為。這個外掛支援支援canvas元素所有主流瀏覽器。 隨著excanvas你甚至可以呈現在IE 7 +8的圖表


13. Isotope:jQuery智慧佈局外掛
Isotope(jquery.isotope.js)是一款優秀的jquery自適應外掛,支援大多數瀏覽器,需要jquery 1.4.3及其以上版本。你可以用它來建立動態和智慧佈局。你可以隱藏和顯示與過濾專案,重新排序和整理甚至更多。同時Isotope還有許多很酷的動畫。


14. jQuery imagesLoaded:jQuery圖片載入外掛
imagesLoaded(jquery.imagesloaded.js)外掛是在圖片載入成功後才做一系列操作,檢測影象是否已經載入,在圖片載入成功後才做一系列操作。

外掛介紹:圖片延時載入外掛 imagesLoaded


15. jQuery Countdown:精確到毫秒的jQuery倒計時外掛
jQuery Countdown(jquery.countdown)是一款免費的jQuery倒計時外掛,使用非常簡單,直接下載原始檔拷貝里面的程式碼到你需要使用的頁面,然後自定義倒計時的開始時間即可,支援需要IE8+瀏覽器。

外掛介紹:jQuery 倒計時外掛 jQuery.countdown


16. jQuery Counterup:jQuery數字動態累加jQuery
jQuery Counterup(jquery.counterup.js)一個jQuery數字顯示外掛,用於數字從低到高動態累加,可以在一定時間內將數字動態的由0顯示到指定的值。

外掛介紹:數字累加外掛 CounterUp


17. jqBootstrapValidation:用於Bootstrap表單的jQuery驗證框架
jqBootstrapValidation(jqBootstrapValidation.js)是一個用於Bootstrap表單的JQuery驗證框架。驗證直接用data-方式進行程式碼編寫,不需要編寫JS格式,支援郵箱驗證、數字型最大最小值驗證、長度驗證、正則表示式驗證、非同步驗證、以及組合式驗證、提交出錯成功時回撥顯示。


18. jQuery Revolution Slider:強大的視差響應幻燈外掛
jQuery Revolution Slider(jquery.themepunch.revolution.js)是一個具有視差功能的幻燈片外掛,此外掛是wordpress上目前為至最強大的幻燈片外掛,具有自適應功能、可建立全寬幻燈片、具有視差效果,所有幻燈片擁有的功能他全部擁有。

Slider Revolution是codecanyon上銷量第一的wordpress幻燈外掛,themeforest中wordpress主題使用率最高的幻燈外掛。文章縮圖、圖片切換、動畫效果、3d效果…只有你想不到,沒有它做不到,Slider Revolution幻燈外掛的強大隻有你使用過後才能知道。這也是themeforest眾多主題作者把它作為主題內建外掛的原因。