40 個讓你的網站更加友好的 jQuery 插件

jopen 11年前發布 | 67K 次閱讀 jQuery jQuery插件

一個插件的基本功能是執行一個含有元素集合的函數數組。每個方法和jQuery核心組成一個插件,如.fadeOut()或.addClass()。一個jQuery插件是一個基本的可以擴充jQuery 原型對象的方法。當原型對象被擴充后,jQuery所有的對象都可以繼承每一個擴充的方法。

jQuery有強大的社區支持,社區里有很多技能嫻熟的開發者夜以繼日的創造出令人驚嘆的腳本和網絡應用。然而,這將增大了為你任務篩選插件的難度。這就是你為什么會看到此推薦,你將在這里找40個必須的jQuery插件集合,當你應用這些插件時,將會讓你得網站變得更加友好。

好好享受吧!

1.FlowType.js

40 個讓你的網站更加友好的 jQuery 插件

FlowType.JS是一個可以自動調整字體大小和行高(根據父類的寬)的jQuery插件,這樣我們的內容將呈現出我們喜歡的樣子。當調整大小時,它可以設置最小/大字體,最小/大寬度。同時它對webfonts有很好的支持,下面是個展示它如何工作的例子(試著改變改變瀏覽器的大小).

下載

2.jQuery Flat Shadow

40 個讓你的網站更加友好的 jQuery 插件jQuery Flat Shadow是一個能夠添加陰影效果到任何目標上的jQuery插件。它可以自定義陰影的顏色,角度,同時還可以控制陰影的開啟和關閉狀態。

下載

3.任意錨點JS

40 個讓你的網站更加友好的 jQuery 插件

Arbitrary.Anchor.js是一個可以擴充標準錨點(通過#鏈接)功能的jQuery插件。它可以讓我把目標投向任何jQuery選擇器(如類和元素類型)而不僅僅局限于id。同時它對復雜的選擇器支持的也不錯。(如http://example.com#.sup.brah-這要匹配兩個類)。點擊鏈接將會產生平滑的自動滾動效果。而且,這個滾動的速度也可以在鏈接里設置(如 http://example.com#.sup.brah|100 )

下載

4.tidyTime.js

40 個讓你的網站更加友好的 jQuery 插件

tidyTime.js是一個友好展示時間的jQuery插件。時間數值將被轉化為如:“9點過一刻”,“5點整”,“7點57”字串等等。而且,這個插件允許我們可以在時間的前邊或是后面添加自定義字串,如:“嗨,現在是3點50分,要快哦!”。也可以根據不同的時間戳指定字串,這樣當觸發tidyTime時就會產生一個存在的回調。

下載

5.Sticky-kit

40 個讓你的網站更加友好的 jQuery 插件

Sticky-kit是一個很方便的jQuery插件,它能簡單的創建/管理粘性元素,而且一些組合特性也能用于復雜應用中。這些特性包括“處理多個粘性元素”,“根據元素在視圖中的位置開啟和關閉行為”以及回調。同時它也有根據瀏覽器大小改變重新計算元素尺寸的函數。

下載

6.Owl Carousel

40 個讓你的網站更加友好的 jQuery 插件

Owl Carousel是一個可以讓我們快速創建響應式旋轉木馬滑塊的插件。它支持觸摸和能夠展示包含任何標簽的HTML內容。它可以設置換頁/滑動速度、開啟/關閉自動演示,展示豆子導航等。同時,也可以定義桌面顯示項目的數目,Owl Carousel可以自動的區分平板和手機。

下載

7.SlimMenu

40 個讓你的網站更加友好的 jQuery 插件

SlimMenu 可以將帶有深度的非順序列表轉化為一個帶有子菜單的菜單,在小屏幕上,菜單變成下拉式導航。它支持觸摸和自定義選項如動畫和速度。

下載

8.Tabulous.js

40 個讓你的網站更加友好的 jQuery 插件

Tabulous.js是一個輕量級的jQuery插件,它能用普通的HTML結構來簡單的創建。選項卡可以用CSS創建,同時存在開關效果(滑動,縮放,翻轉)。它沒有復雜的特性,就只有選項卡,它的特效有時就是我們想要的。

下載

9. EasyAB

40 個讓你的網站更加友好的 jQuery 插件

這是一個快速創建A/B或者多元測試的jQuery(和Zepto)插件。一旦事件被觸發,他們就會被Google Analytics中的自定義變量記錄下來。easyAB可以添加任何數量的命令,同時它們可以自定義到JavaScript函數中。

下載

10. S Gallery

40 個讓你的網站更加友好的 jQuery 插件S S Gallery是另外一款jQuery圖片畫廊插件,它能夠在可以有響應事件的網格中顯示圖片。它的靈感是來自于sony產品首頁的畫廊效果(sony產品首頁是用flash制作的),然后S Gallery完全模仿了它。當某個單元格被點擊并且獲取到焦點的時候,你就可以通過向前-向后按鈕或方向鍵來瀏覽其他的圖片。

下載

11. Twenty Twenty

40 個讓你的網站更加友好的 jQuery 插件

TwentyTwenty 是一個視覺擴散工具,非常容易的就能夠辨認出它們。它的原理是兩張圖片互相堆疊在對方的上面。當滑塊移動通過整個圖像的時候,它利用css的屬性來調整左側的圖像。這允許右邊的圖像顯示通過容器。

下載

12. SMint

40 個讓你的網站更加友好的 jQuery 插件

Smint 是一款簡便的jQuery插件,她可以幫助你實現一頁風格網站的導航。她由兩個元素組成,一個是粘性的導航條,他可以在你滾動你的頁面時停留在整個頁面的頂部;另一個是菜單按鈕,它可以自動地讓頁面滾動到你鎖點擊的區域。SMINT是一個簡單的插件,她又一個選項可以控制頁面的滾動速度。她的默認速度是半秒鐘,當然你也可以把她設置到任意你想要的時間。下載的組件中還包含有例子,她們都可以免費的作為您單頁網站的惹眼的模板。

下載

13.Loda Button:加載時的動態按鈕

40 個讓你的網站更加友好的 jQuery 插件

Loda Button 是一款簡易的jq插件動態按鈕圖標,在等待從服務器獲取數據時使用。loda-btn和loda-icon的樣式被用在了這款插件的按鈕組件中。他的樣式十分簡單,并且放置在loda-button.css文件中。此組件的動態效果是使用支持Chrome,Firefox,Opera和IE10的css3的animation,transitions和transforms實現的。

資源

14. Pop Easy

40 個讓你的網站更加友好的 jQuery 插件

PopEasy是一個輕量jQuery插件,它是任何一個像輕易創建模態窗口的開發者所必備的。通過在你的頁面上應用一個遮罩效果并彈出一個定制的模態窗口,來讓你的焦點放在重要的信息上。

要在頁面上使用多個模態窗口,你必須在你希望打開的div層中同步id觸發器的href屬性。這種工作原理和從一個彈出的模態過渡到另一個模態的原理是一樣的。只需要在你希望離開的模態窗口中放置一個href連接,它和另一個模態的id相匹配。
 
源碼

15. Reveal

40 個讓你的網站更加友好的 jQuery 插件

Reveal很了不起,實現起來也簡單,是一個跨瀏覽器并兼容現代瀏覽器(還帶有優雅降級功能)。同時它很輕量,只有1.75KB。設置Reval模態只需要三步。附加所需文件,放入模態的標記處然后給你的按鈕添加屬性。Reval遵守MIT許可。
源碼 

16. Hide/Show Password Plugin

40 個讓你的網站更加友好的 jQuery 插件

Hide/show Password插件讓你輕易隱藏和顯示密碼輸入欄中的內容。這個插件最酷的部分就是”innerToggle“選項。當設置為開的時候,它可以很容易創建漂亮隱藏/顯示 控件,你可以定制自己喜歡的樣式。在觸屏瀏覽器中,你滑動的時候它甚至能保持輸入焦點。
 
源碼

17. Readmore.js

40 個讓你的網站更加友好的 jQuery 插件

Readmore.js是一個平滑的,輕量的jQuery插件,用于折疊和展開大段的文本。并帶有“閱讀更多”和“關閉”鏈接。 Readmore.js所需的標記語言極其輕量而簡單。不需要div層的復雜設置或者硬編碼的類名,只需要在包含大段文本的元素里調用.readmore(),Readmore.js就會幫你處理剩余的工作。
 
源碼

18.向上滾動

40 個讓你的網站更加友好的 jQuery 插件

ScrollUp是一個輕量級jQuery插件,它可以簡單的創建適用于任何網站的用戶自定義“向上滾動”特性。給activeOverlay設置一個可用的CSS顏色,這樣你可以創建一個可見的線條幫助你決定一個適合的高度(出現向上滑動的標識,譯注)。

源碼

19.FlipClock.js

40 個讓你的網站更加友好的 jQuery 插件

FlipClock.js是一個可呈現任何和時間相關的可重復性特效的jQuery插件。FlipClock.js可支持作為一個時鐘,倒計器和計時器,同時用戶也自定義完整的CSS來改變它的外觀。它有可以自動開始的選項,還有很多回調方法來控制(start,stop,getTime,setTime...)。同時,它也有可以增加功能的全功能API。

源碼

20. Mobiscroll

40 個讓你的網站更加友好的 jQuery 插件

Mobiscroll是用于觸摸設備(安卓手機,iPhone,Galaxy平板)的旋轉滾輪/日期和時間選擇器的jQuery插件。這個控件能輕易地定制來支持任何常規值并能用于常規選擇控件(下拉列表)作為直觀的選擇項。這種控件可以更換主題,你可以在CSS里更改外觀。它還帶有預定義,漂亮的配色方案,并通過了IOS4,Android 2.2,Android 2.3,Chrome,Safari,Firefox和IE9的測試。
 
源碼

21. Minimit Gallery

40 個讓你的網站更加友好的 jQuery 插件

Minimit Gallery 是一個高度可定制的,可無限擴展的插件,用來顯示相冊、幻燈片、旋轉木馬、滑動等效果, 實際上所有包含復雜效果的東西不超過10kb 。使用 Minimit Gallery 你可以將更多的時間放在構思和界面的動態效果上,所有的邏輯功能將通過此插件來進行管理。它是為JavaScript/Jquery 高級程序員設計的,因為你需要編寫所有的動畫和相冊樣式表。它已經在IE7+, Firefox, Safari 和 Chrome上測試通過。
 
源代碼 & 示例 

22. Cycle 2

40 個讓你的網站更加友好的 jQuery 插件

Cycle是一個相當古老卻很流行的jQuery幻燈片插件。它現在有一個新的,改進的版本:Cycle2.這個插件非常適用于任何想要創建完全自定義的幻燈片的人群,使用這個插件不需要聲明任何標記語言或者樣式。功能上,它也很靈活。Cycle2支持響應布局,對全部或單個的幻燈片有設置選項,并能通過全特性API輕易地得到拓展。
 
源和演示 

23. Circular Content Carousel

40 個讓你的網站更加友好的 jQuery 插件

這款插件用在在可以附著概要描述內容的滑動條上,當用戶點擊內容時(圖片中的more按鈕),一個小的盒子會滑動到當前盒子的旁邊,在那里用戶可以閱讀和看到與主題相關的詳細信息,并且滑動條還可以起到導航的作用。

資源和范例

24. Tooltipster

40 個讓你的網站更加友好的 jQuery 插件

Tooltipster 是一個 jQuery 插件,用來快速創建 HTML5驗證 和靈活的工具提示。這個插件體積小小 (4.8kb 縮小后),運行速度快,并且能夠靈活定制。它的外觀可以通過CSS(主題支持)和箭頭的位置來改變。跟隨鼠標,外觀的延遲/周期,都可以進行定義。
 
源代碼 

25. Colortip

40 個讓你的網站更加友好的 jQuery 插件

它在你的頁面中把元素的title屬性轉化為一系列的多彩的工具提示(tooltips)。有6中顏色可用,所以你可以輕易地在你的設計中配色。在colortip-1.0-jquery.js中,你還可以通過把附加的樣式類包含到樣式表,給顏色數組添加元素來創建自己的工具提示。

源碼

26. MasonJS

40 個讓你的網站更加友好的 jQuery 插件

MasonJS,這個jQuery插件用來解決當前大多數的網格系統相關的問題。當使用Masonry,Isotope或者任何其他的網格插件,你的網格將會包含凹凸的邊緣和溝縫。Mason就是用來填充這些溝縫的。

MasonJS關注你的網格并查找所有構成網格的元素。它創建了一個基于這些元素尺寸的完美網格陣列,并循環查找網格中的每一個元素塊來決定縫隙的位置。然后他就用填充元素填充縫隙,這是你可以定義或者在你的網格中復制元素。

源碼

27. Unslider

40 個讓你的網站更加友好的 jQuery 插件

Unslider是一個只能滑動的jQuery滑塊插件。沒有奇特的滑動效果沒不需要標記,并且它體積小于3kb。 它非常流暢,靈活,體積非常小。 Unslider已經在所有最新的瀏覽器中測試過,并能在落后的瀏覽器中優雅降級。你可以在需要的時候添加鍵盤指針支持。不是所有的滑動都一樣,Unslider也知道這一點。在沒有額外的代碼下,它能在高度上時尚地過渡。這些天你很難找到不能響應的網站。Unslider回來了,它是完全響應的。
 
源碼

28. Camera : 支持觸摸的jQuery幻燈片插件

40 個讓你的網站更加友好的 jQuery 插件

Diapo的開發者已經創建了一個新鮮的插件,叫做Camera,它帶有很多特性并在響應式布局中工作良好。可以通過HTML元素(圖像,文本,視頻等)來創建幻燈片,Camera會在一個外觀優美的接口中顯示出來并帶有一系列的過渡效果。

源碼

29. Royal Slider

40 個讓你的網站更加友好的 jQuery 插件

Royal Slider是一個jQuery插件,它可以在滑動片中顯示任何HTML內容(圖像,視頻,文本等),并帶有不凡的特性。幻燈片有50項可供定制,4套帶有PSD源文件的皮膚,9個預組件的模板(不斷更新)和所有的CSS樣式。在CSS3的動畫效果下(JS降級),該插件工作在主流的瀏覽器中,并能在移動設備中響應式輸出,運行高速。同時,因為有了延遲加載功能(只加載部分項目),在有很多幻燈片的情況下,它也能快速完成加載。
 
源碼

30. Progression.js

40 個讓你的網站更加友好的 jQuery 插件

Progression.js插件在用戶完成表格時提供實時提示和經度更新。你所需要做的就是給你的表格一個唯一的ID。然后把數據進度的數據屬性添加到每一個元素,這些元素是表格中的一個處理步驟。一旦你創建了表格,你就要初始化這個插件。

源碼

31. jQuery 顏色板

40 個讓你的網站更加友好的 jQuery 插件

jQuery.swatches 是免費的,用來將單行的div轉變為漂亮的彩色調色板。你可以按照希望的方式對其自定義。每一次對不同的選擇符調用swatchify()的時候,使用不同的類將會渲染出不同的色板組。
 
下載

32. jPages : JavaScript 驅動的分頁插件

40 個讓你的網站更加友好的 jQuery 插件

jPages是一個客戶端的分頁腳本 (一個 jQuery 插件) ,它具有鍵盤+滾動瀏覽,自動翻頁,延遲顯示以及自定義瀏覽面板的特性。同一個頁面可以插入任何數字的分頁元素,并且非常容易放置定位。
 
下載

33. FitText

40 個讓你的網站更加友好的 jQuery 插件

FitText是一個簡單單功能性強的jQuery插件,它用來創建適應已定義元素的文本。它能自動更新字體尺寸并,并自動適應換行元素,保證不會因為字體因素而造成布局崩潰,能在移動端或PC端瀏覽器中顯示頁面
 
下載 

34. FitVids.js

40 個讓你的網站更加友好的 jQuery 插件

FitVids.js是一個輕量的,簡單易用的jQuery插件用于創建流暢的嵌入視頻。FitVids自動設置固有比率方法來在你的響應式設計中完成創建流暢的視頻。
 
下載 

35. Swipebox

40 個讓你的網站更加友好的 jQuery 插件

Swipebox是一個jQuery燈箱插件,并支持觸摸事件,在響應式布局中也工作良好。當使用擦除手勢或者鍵盤事件時,它會顯示單個或者一組圖形性質的元素。插件主要使用CSS過渡并在支持性不好的瀏覽器中提供jQuery降級。
 
下載

36. Turn.js

40 個讓你的網站更加友好的 jQuery 插件

Turn.js是一個jQuery插件,它帶有可愛光滑的翻頁過渡效果。第一頁作為封面,剩余部分可以通過翻動頁面的任意角度來瀏覽。Turn.js只有15kb,可在移動端和平板瀏覽器中使用,并使用了硬件加速。
 
下載 

37. imBookFlip

40 個讓你的網站更加友好的 jQuery 插件

imBookFlip插件能在一個內聯框架或者直接在整個頁面顯示出書本樣式的內容。頁面可以設置為可翻動,用戶可以點擊或者通過自動播放來翻頁。悲哀的是,它不支持拖動翻頁效果。同樣,它的API允許直接指向目標頁面。
 
下載 

38. Booklet

40 個讓你的網站更加友好的 jQuery 插件

Booklet可能是這個列表里選項最多的插件,它能配置每一個變量。JS翻頁效果不是很強大,因為它要保持內容在范圍內(不超過書本本身),但它工作健壯。可以通過鍵盤,前后鍵或者自動播放來翻頁。每一個頁面有一個唯一的URL(使用哈希標簽)。它支持章節,顯示頁面號,回調交互。
 
下載 

39. Gmaps.js

40 個讓你的網站更加友好的 jQuery 插件

GMaps.js 是一款資源豐富的jQuery插件,它可以使消耗過高的谷歌地圖輕便化。此外,加入了一個特殊定位的標準地圖,我們可以定義其縮放比例,添加商場,得到用戶所在位置(HTML5 geolocation),定義了路徑,標記出路線并且還有跟多內容僅僅通過一小段代碼。

下載

40. JQVMap

40 個讓你的網站更加友好的 jQuery 插件

JQVMap用來渲染矢量地圖的jQuery插件,它在現代瀏覽器中使用SVG,其余的瀏覽器中使用VML。這是一個基于jVectorMap插件高度修改的版本,帶有即用的世界地圖。有很多美化地圖的選項,如顏色,邊框或模糊。

下載  

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!