台灣網站導航  www.9900.com.tw
標題:    50個jQuery插件可將你的網站帶到另一個高度     點閱:1432   2017/6/16 下午 06:52:16
50個jQuery插件可將你的網站帶到另一個高度

Web領域一直在發生變化並且其邊界在過去的每一天都在發生變化(甚至不能以小時為計),隨著其邊界的擴展取得了許多新發展。在這些進步之中,開發者的不斷工作創造了更大和更好的腳本,這些腳本以插件方式帶來更好的終端用戶體驗,它們比原來更輕量級,還有更強的處理能力。


關鍵是這些新發展起來的腳本和插件是能構建響應式Web的,而且還不會喪失它們原有的功能特性——除了更優秀和更輕巧(就文件大小而言)之外,它們還不會增加頁面加載的時間。


通過瀏覽文檔,掌握JQuery的語法是很容易的。它可以支持選擇DOM元素,創建動畫,處理事件,開發Ajax應用,甚至還為開發者提供了基於JavaScript類庫之上創建插件的能力。



jQuery架構的開發人員能夠創建一個插件代碼來擴展其功能,從而能夠產生一些最好的插件,讓你的網站或任何給定的項目達到一個全新的水平。


在這篇文章中,我們已經積累了一些供你挑選的最佳JQuery插件,這些插件提供了各種的功能和特性能夠讓你的網頁呈現許多可想像到的效果。我們希望你能夠在下面的列表中找到你正在尋找的插件。


在下面的評論區域讓我們知道哪些插件你以前使用過或者你正在考慮在將來的項目或網站中使用哪些插件。






Flickerplate是一個可以讓你彈出內容的易用jQuery插件。它也依賴Modernizr來進行觸碰檢測和在觸碰事件使用jQuery.Finger庫。Flickerplate通過很多種方式配置。你可以通過Javascript調用來設置選項。或者你可以通過在實際的元素上通過data屬性設置選項。



TaggingJS 是一個用來創建高度可定製的前端標籤系統的jQuery插件。它小於3 kb並且支持世界上大部分瀏覽器。它基於MIT 許可。 50個jQuery插件可將你的網站帶到另一個高度"//a.read01.com/blank-55bbdde1.gif" src="/images/vimg/201706/201706161852002.jpg" />



ScrollMagic 是一個神奇滾動交互的jQuery插件,ScrollMagic 允許你像進度條一樣使用滾動條。如果你想在指定滾動位置啟動一個動畫,保持和滾動條運動同步動畫,並固定一個元素到指定滾動位置(黏性元素),這就是為你而設的插件。32. jPages : JavaScript Powered Pagination



jPages 是一個客戶端分頁腳本(一個jQuery插件),具有像鍵盤+滾動導航,自動換頁,延遲展示和一個可自定義的導航面板的特性。分頁元素的任意頁數能夠插入到相同的頁面,並且能夠輕易定位。PNotify 是一個由SciActive 開發的 JavaScript的通知插件,曾用名Pines
Notify。它的設計理念是提供一個極度靈活而又非常容易實現和使用。它可以提供非阻塞的通知。允許用戶在不關閉它的情況下點擊通知後面的元素。PNotify 使用了Bootstrap 和 jQuery UI來定義樣式,這意味著可以非常容易的對它進行自定義主題樣式。6. Wholly



Wholly 是一個jQuery的插件用來觸發表格列上的mouseenter 和 mouseleave事件。Wholly 用來高亮整個表格列,並且支持表格的colspan和rowspan屬性。如果你想要支持colspan和rowspan屬性,那麼首先你需要構建表格單元格的索引(cell
index)。之後,你需要追蹤表格所有單元格的事件,找出你感興趣的,並計算出它們在矩陣中的offset以及共享同一個垂直索引(vertical index)的列。Wholly在設定特定樣式方面是沒有任何限制的。



MixItUp 是一個jQuery插件,提供動畫過濾和排序。在管理容易歸類或者像文件夾一樣的有序內容和博客時非常不錯,但是也能作為一個吸引人的應用UI和數據可視化的一個強大的工具起作用。



Velocity是一個jQuery插件,它重新實現了$.animate 同時包括改善動畫流程的新特性 (使得 Velocity也比CSS動畫庫更快) ,用來產生性能顯著的動畫。



rowGrid.js是一個小的,輕量級(gzip後大約700 比特)的 jQuery插件,用來在徑直的行里放置圖片 (或者其他內容項)。網格類似Google圖片搜索,flickr,shutterstock 和Google+ 圖片的網格。 rowGrid.js 是響應式的,它允許用戶無限滑動。所有的內容項擁有相同的高度,但寬度是可變的。10. Croppic



Croppic 是一個圖片裁切jquery插件。它能提供滿足你的需求外更多的功能。 簡單上傳一張圖片,然後你能夠按照你喜歡的放大縮小的實際情況來裁剪圖片。它需在IE 10+, chrome,和firefox才能正常工作。它使用FormData所以現在不支持IE9和之前的版本。



ImageLightbox.js是一個難以置信簡單,響應式,觸碰友好燈箱效果的腳本。它是由可擴展的,可配置的,極簡化的(瘦身後只有4kb),並且使用CSS變形和轉換來移動圖片。12. jQuery Tip Cards



Tip Cards 插件允許你創建你在Google Tips頁面看到的使用類似卡片交互的cards布局。有幾種新的動畫選項,所以你可以按你喜歡的進行人性化定製。你可以在模態窗口打開或者關閉的時候,使用回調方法來進行操作。已在像Chrome,Firefox和Safari的桌面現代瀏覽器測試過。



在Brad Frost寫一篇關於浮動標籤模式的博客文章後,浮動標籤模式取得了成功。這想法是基於Matt D Smith 的 Dribbble Shot。這種模式很容易解釋。在用戶使用一個輸入欄位交互時,placeholder的值向上移,並在類型文本上面顯示。14. Nanogallery



nanoGallery對jQuery來說很容易實現圖片畫冊插件。它具有很多特性:支持觸碰,響應式,快速和支持雲儲存。 相冊多級導航,燈箱效果,許多縮略圖的hover效果,滑動展示,全屏,分頁,圖片延遲加載,主題,兼容bootstrap,可定製,可從Flickr/Picasa/Google+拉取照片等等。



jQuery Panoram Viewer
幫助你在網站內嵌Panorama圖片。使用這個插件,你能夠在你的網站顯示你的Panorama圖片。為了做到這些,首先你不得不在你的文檔中包含最新的JQuery庫和jquery.panorama_viewer.js以及panorama_viewer.css,然後在HTML上給你的圖片增加"panorama"類。現代瀏覽器例如Chrome,Firefox和Safari的桌面和移動版本都已經測試通過。16.
SVG Magic



SVGMagic是一個跨瀏覽器的兼容JQuery插件,它搜索你網站上的SVG圖片,如果瀏覽器不支持SVG,自動的創建PNG版本。它是簡單的,單一目的的插件,不需要配置。



BttrLazyLoading是個允許你的網頁應用在窗口裡面只加載圖片的jQuery插件。它也允許你在4個不同螢幕尺寸里擁有不同版本的圖片。BttrLazyLoading允許你的網頁應用延遲加載圖片,直到被滾動到圖片。這樣的方式下,頁面加載時間大幅度減少。18. Remodal



Remodal 是一個扁平化,響應式,輕量級,高速,易定製的,聲明性狀態注釋和哈希追蹤的模態窗口插件。所有的現代瀏覽器都支持。你可以輕易地定義模態背景容器(就像一次失焦效果)。



Slinky.js 是一個用在使用堆疊頭部創建滑動導航列表的jQuery插件 。它有無數的特性:就像通過禁用光標事件來平滑滑動,壓縮後大約1KB的輕量級,在窗口重調大小和DOM改變上刷新,還有和你喜歡的最新版本的瀏覽器兼容。20. Adaptive Backgrounds



Adaptive Backgrounds 是一個jQuery插件,用在從圖片抽取主要顏色和應用到父元素。這個插件利用了畫布元素和ImageData對象,歸根於其跨站安全限制,如果某個腳本試圖從非當前域名主機抽取圖片的顏色將會失敗,除非圖片允許跨源資源共享。網頁的腳註是煩人的。你點了一個小數字,跳轉到頁面底部附近,找到你尋找的腳註,然後點擊一個連結回到頁面原來的地方。Bigfoot看起來讓整個處理流程不再痛苦。它自動檢測腳註連結和內容,將連結轉化成一個容易點擊的按鈕,當讀者點擊腳註按鈕的時候彈出浮窗(譯註:官方演示的版本是直接跳轉)。22.
Dynatable



Dynatable是一個使用jQuery,HTML5和JSON的,更有趣的,語義化的,交互表格插件。 並且不僅是用在表格上。Dynatable 的目的是提供一種簡單的、可擴展的 API,能夠輕鬆地瀏覽和操作大數據集。



jQuery Label Better 就像個優雅動畫的老大一樣幫助你在表單輸入上不占空間地定標籤。這個插件最獨特的是你需要做的所有工作僅是添加一個占位符的文本,我們將在當用戶需要的時候顯示標籤。



stickUp 是一個jQuery 插件。你可以在任意使用jQuery的網頁上執行。你可以簡單地在任意頁面創建任意你想用戶在任何時候都可以看見的元素,只要用戶滑超它,就會粘到瀏覽器窗口的頂部。



Freewall是一個跨瀏覽器響應式的jQuery插件,它使用很棒的CSS3動畫效果和回調事件,能幫你創建很多類型網格布局:可伸縮布局,圖片布局,嵌套網格,流式網格, metro風格網格,類品趣志網格。Freewall是個創建桌面,移動和平板的動態網格布局的一體化解決方案。26. jQuery Interactive 3D



jQuery Interactive 3D是一個允許我們使用多圖完成一個類似功能的插件。 使用起來簡單,使用簡單的函數和指定一組名字的圖片。 還有,還擁有定製化的可選項,比如光標圖標,速度,支持觸屏,自動播放等等。



Succinct是一個用作截斷多行文本的jQuery小插件。它縮短你的文本到指定的尺寸,並在後面添加省略號。你可以用選擇器指定要截斷的元素,然後設置你想看到的數量的尺寸參數。



SlideMe!是一個響應式樣的,CSS3兼容的jQuery滑動條插件,它同時支持受限的和全屏的視圖。它能用在豎屏和橫屏, 使用了CSS3轉換和支持分頁。提供控制滑動的方法(prev, next等),還有它們及更多方法對應的回調方法。Glide.js是一個輕量級(壓縮後4.5kb)的jQuery插件,用於創建滑塊。其具有完全可定製的OOCSS標記及CSS3轉換,而且可以回調JavaScript。該滑塊是響應式的;其能適應所有的設備並有對觸摸的支持。你可以通過鍵盤、滑動事件、彈窗或箭頭菜單來控制元素。Glide.js還有支持所有的事件(播放,暫停,下一步,上一步,等)公共的API。30.
PhotoJShop



PhotoJShop是一個允許我們對圖像應用簡單效果及過濾器的jQuery插件。這些過濾器包括模糊、底片、浮雕、減輕、變黑、黑白、銳化以及更多。插件可以在canvas和圖像上工作,並且過濾器很容易使用。
31. One Page Scroll

height="342" />



One Page Scroll是一個jQuery插件,其簡化了創建類似網站的難度。它只需要很少的設置,只需要創建HTML結構,調用函數你就已經就緒了。可選的,作為附加功能,其速度和循環行為也可以設置。而且它支持每個頁面的SEO友好型URL。


32. FerroSlider

height="321" />



FerroSlider是一個用於創建整頁面(或者是內容/圖像滑塊)等幾乎所有類型滑塊的jQuery插件。內容可以以靈活的方式放置,水平或垂直,插件都能夠使得瀏覽起來很容易。為提高性能它使用了CSS3變換,能夠與響應式布局良好配合且能應用在移動平台上。



33. Scrolld.js

height="321" />



Scrolld.js是一個獨特的jQuery開源插件。Scrolld.js使用實時更新的數據為像素級布局和導航提供了一個高度精確的滾動。使用Scrolld.js ,你總能精確的滾動到指定目標並且總能提供最好的用戶體驗。


34. AnimateScroll

height="342" />



AnimateScroll是一個簡單的jQuery插件,可以用來添加鬆弛的滾動條效果。你可以自定義滾動條樣式(30多個滾動效果)以及滾動速度。「padding」屬性可以控制滾動條的結束位置。該插件不僅限於整個的body頁面,而且可以用於指定的元素。



35. MasonJS

height="321" />



MasonJS jQuery 插件是用來解決大部分網格系統目前都會遇到的問題,縫隙。當使用Masonry, Isotope 或任何其他網格插件時,你的網格有時總會出現縫隙或參差不齊的邊。Mason就是用來填充他們的。


36. JInvertScroll

height="342" />



jInvertScroll 是一個控制默認滾動行為和強制縱向滾動的jQuery插件。該插件足夠輕量級(小於1kb)並且幾乎不需設置便可使用。為包裝元素添加指定類並且調用JS函數就可以了。另外它可以用onScroll回調(我們可以決定調整任一元素的地方)輕易創建視察效果。



37. Flowtype.js

height="342" />



FlowType.JS是一個可以自動調整字體大小(font-size)和行號(line-height)的jQuery插件(根據包裝元素的寬度),使得我們的內容可以像我們希望的那樣顯示。該插件提供了設定最小/最大字體尺寸和寬度的屬性。


38. nProgress

height="342" />



NProgress.js是一個納米進度條。以現實的細膩的動畫告訴用戶正在發生的事情。它是一個靈感源於Google,YouTube,和Medium的輕量級的進度條,完美適用於Turbolinks, Pjax,以及其他 Ajax級別的應用。



39. Tidy Time.js

height="317" />



想使用對人友好的語言,來展示一個基於時間的更新?TidyTime.js就是個做這事的插件,它轉化標準的時間格式到個人聲明的時間格式。


40. Fullpage.js

height="321" />



FullPage.js是一個簡單易用的插件,用來創建全屏滑動網頁(也被認為是單頁面網站)。它允許你創建全屏滑動網站的同時,也添加一些橫向列印風格的輪播器到站點的各個部分。它被設計成適用於不同螢幕尺寸,以及平板和移動設備。







jQuery Flat Shadow是一個可以為你想的任何東西添加衰退陰影的插件。它能夠定義陰影顏色,角度和啟用\禁用陰影衰退。50個jQuery插件可將你的網站帶到另一個高度"//a.read01.com/blank-55bbdde1.gif" src="/images/vimg/201706/2017061618521141.jpg" />



Owl Carousel 是一個允許你快速創建響應式旋轉滑動條的jQuery插件。插件是觸碰友好並且擁有任意表示的任意HTML內容的特色。它有可選項用來設置分頁/滑動速度,啟用/禁用自動播放,顯示插入導航和其它。



S Gallery是另外一個在響應式方格展示圖片的jQuery圖片畫冊插件。其靈感來源於Sony的產品頁面畫冊(使用Flash製作) ,並完整模仿了它。一當一個圖片項被點擊和獲得焦點,就可以使用向前-向後按鈕或者通過鍵盤瀏覽其他的圖片項。44. Pop
Easyheight="342" />



PopEasy是一個輕量級jQuery插件,對於一個開發人員簡單創建模態窗口是必須的。通過在你的頁面應用一個遮罩並打開一個可定製的彈出模態窗口,把焦點放在重要的元素上。



ScrollUp是一個輕量級的jQuery插件,用來創建自定義的「滑動到頂部」功能,可以簡單地用到任何網站。通過指定一個有效的CSS顏色到activeOverlay設置,創建一個可視線來幫助確定距離頂部的理想滑動距離。46. Mobiscroll



Mobiscroll是一個用在觸屏設備(Android手機,iPhone,iPad,Galaxy Tab)上的輪滑跑馬燈,或者日期時間拾取器的jQuery插件。控制器能輕鬆地進行定製以支持任意自定義值,並且甚至直接作為原生的選擇控制器(下拉列表)的一種替代方案使用。控制器是可以主題化的。在CSS里你能輕易改變外觀。它也支持預定義,好看的顏色模式。已在iOS4,Android
2.2,Android 2.3,Chrome,Safari,Firefox,IE9上測試過。
47. Cycle2

height="321" />


Cycle,是過去的一個非常受歡迎的jQuery幻燈片播放插件,現在有了一個增強的版本:Cycle2.該插件對於那些期待創建完全個性化的幻燈片展示效果的人是非常完美的,因為它沒有聲明任何標記或樣式。並且,它的功能非常靈活。Cycle2支持反應靈敏的布局,幾乎包含應對所有的選項(全局或者單張幻燈片),通過使用全部特性的API,還可以非常輕鬆的進行擴展。


48.Tooltipster

height="342" />


Tooltipster 是一個 jQuery 插件,用於快速創建 HTML5 驗證和靈活的工具提示。該插件屬於「麻雀雖小,五臟俱全」的類型,壓縮後僅4.8kb,但是工作起來非常快,並且可以輕鬆的定製。它的外觀可以用 CSS (主題支持) 和箭頭進行修改,跟隨滑鼠的位置改變,延遲等外觀特效都可以被定義。



49.FitText

height="321" />


FitText是一個非常簡單但是卻功能強大的jQuery插件,可用來確保文本能夠適應已定義好的元素。它根據元素環繞它的寬度自動更新字體大小,並保證布局不會太零碎(因為字體大小),即使頁面是在桌面瀏覽器或者移動端中顯示。還有,該插件提供了一些選項微調,包括設置"水平縮放"的能力和尺寸的最小到最大。


50. Unslider

height="394" />


Unslider是且僅僅是用於圖片展示的jQuery滑塊插件。沒有華麗的特效和多餘的裝飾,該插件小於3kb。它是流暢、靈活,並且令人難以置信的小。Unslider已經在目前所有的瀏覽器最新版本中進行了測試,再不是那麼新的瀏覽器中,只能看到它「落寞的輝煌」。如果你需要,你可以添加鍵盤方向鍵支持。不是所有的滑塊插件生來平等,Unslider深知這一點。(譯者:作者在賣萌麼?)



文章轉載自:開源中國社區 []



本文地址:



參與翻譯:AndyLamGoodLoser地獄星星Garfielt0x0bject無若中獎啦


英文原文:50 jQuery Plugins to Take Your Website to Another Level


----------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------------




  




重要聲明:本網站為內容提供及檔案上載之共享平台,內容發佈者請確保所提供之檔案/內容無任何違法或牴觸法令之虞。
如有違反相關版權問題,請來信告知,本版將刪除有爭議部份.