排列三字谜

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

2015-01-09 15:51:31來源:oschina作者:

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

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

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

好好享受吧!

1.FlowType.js

\

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

下載

2.jQuery Flat Shadow

jquery-flat-shadow

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

下載

3.任意錨點JS

\

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

下載

4.tidyTime.js

\

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

下載

5.Sticky-kit

\

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

下載

6.Owl Carousel

\

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

下載

7.SlimMenu

\

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

下載

8.Tabulous.js

\

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

下載

9. EasyAB

easyAB

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

下載

10. S Gallery

s-galalry

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

下載

11. Twenty Twenty

twenty-twenty

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

下載

12. SMint

smint

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

下載

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

loda-buttons

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

資源

14. Pop Easy

pop-easy

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

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

15. Reveal

reveal

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

源碼

16. Hide/Show Password Plugin

hide-show-password-plugin

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

源碼

17. Readmore.js

read-more

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

源碼

18.向上滾動

\

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

源碼

19.FlipClock.js

\

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

源碼

關鍵詞:jQuery插件

贊助商鏈接:

排列三字谜