jQuery的是一個快速,簡潔的JavaScript庫,它簡化了HTML文檔遍歷,事件處理,動畫和Ajax交互網絡的快速發展, jQuery的目的是改變你寫JavaScript的方式。
jquery改變了開發人員的設計方式,每天jQuery 插件都被不斷被創造,最新的 jQuery 插件和腳本的 對於web 設計人員和開發人員總是很需要的。
今天就給大家分享20個精美的 jQuery 插件、包括 滑塊、 圖像畫廊、 幻燈片顯示插件、 jQuery 導航菜單、 交互式地圖、 手機界面、 手風琴菜單、 工具提示插件和收集許多其他有用的 jQuery 腳本。你可以盡情下載用在你的項目當中
進一步閱讀
推薦35個精心挑選的jquery圖像內容滑塊
開發人員應該知道的15個吸引力的jquery lightbox插件推薦
jquery視差推薦:nikebetterworld視差平滑滾動效果
20個真棒的jquery和css打造的圖片動畫效果(網站背景隨時變換,廣告牌效果..)!
25美麗大氣的jQuery滑塊插件推薦
jQuery的的輕型工具提示插件:Tooltipster
Tooltipster是一個輕量級的jQuery插件,使您可以輕松地創建漂亮的HTML5驗證工具提示。該插件是小尺寸(4.8kb),工作速度快,可以輕松定制。
可以改變它的外觀與主題支持(CSS)和箭頭的位置,跟隨鼠標移動,延遲/周期的外觀都可以被定義。
RoyalSlider - 專業圖片廊和響應的內容jQuery滑塊插件
RoyalSlider的界面可以顯示任何HTML內容(圖像,視頻,文字。)是一個專業的觸摸功能的jQuery插件
RoyalSlider專注於在每一個桌面和移動設備上提供出色的用戶體驗。
RoyalSlider是可以定制外觀的。
兼容性: All Modern Browsers
網站: http://dimsemenov.com/plugins/royal-slider/
演示: http://dimsemenov.com/plugins/royal-slider/templates
跨瀏覽器的JavaScript拖放文件上傳:FileDrop
FileDrop是一個JavaScript的跨瀏覽器類,用於快速創建拖放和AJAX(多個)文件上傳界面。
它不依賴任何 JavaScript 框架,並且可以在多個瀏覽器中運行,包括 IE6。
兼容性:兼容所有瀏覽器
網站: http://proger.i-forge.net/FileDrop_%E2%80%93_cross-browser_JavaScript_Drag_-amp_Drop_file_upload/7CC
Really Simple Slideshow:一個靈活的更大的滑塊jQuery插件
Really Simple Slideshow是一個靈活的jQuery插件可以創建任何類型的圖像滑塊。動態加載圖像的每一個要求,允許加載較大的幻燈片,而不必預先加載大量的圖片。
該插件可將任何圖像轉換到幻燈片列表,它可以顯示字幕與每個幻燈片,包括鏈接,並有多種過渡效果。
兼容性:兼容所有瀏覽器
Website: http://reallysimpleworks.com/slideshow/
Download:https://github.com/reallysimple/Really-Simple-Slideshow
響應jQuery滑塊:IVIEWSLIder
IVIEW slider是一個jQuery Slider 插件可用於展示任意類型的內容(圖片,HTML,視頻)。
這個插件支持響應式布局並能夠很好的兼容觸摸界面。
它已經內置35種轉換效果,可以為每一個slide可以定義不同的效果。
該插件支持向下移動的響應布局
滑塊具有內置的過渡效果,這是完全兼容所有主流瀏覽器(包括IE6到IE9,火狐,Chrome,Safari瀏覽器,歌劇)等移動平台的iOS / Android的3.5。
要求: jQuery
移動Web應用程序的輕量級框架:Sidetap
Sidetap的移動Web應用程序(2KBgzip壓縮)是一個輕量級的框架。
是一個簡潔輕量級的移動 Web 應用開發框架,它專注於提供類似於 Path 或者 Sparrow 這樣的側導航形式的 UI 體驗。
- 輕量級:縮減壓縮后只有2KB。
- 支持不同設備
- 方便配置,讓你立刻開始開發應用。
- 使用簡單
- 依賴jQuery(1.7.2)或者zepto.js
要求: jQuery or Zepto.js
兼容性: All Modern Browsers
網址: http://sidetap.it/
演示:http://sidetap.it/demo/stonehenge/index.html
下載:https://github.com/harvesthq/Sidetap
Javascript的幻燈片Flickr的圖片:Flickrshow
Flickrshow是一個簡單的JavaScript Flickr圖片幻燈片。
網址: http://www.flickrshow.co.uk/
下載: https://github.com/beseku/javascript.flickrshow
HTML生成jQuery Mobile框架:jqmPhp
jqmPhp jQuery Mobile框架,旨在簡化項目使用jQuery Mobile與PHP是一個開源的HTML代碼生成器。
jqmPhp是一個包的PHP類,方便地創建HTML文件,然后使用jQuery Mobile框架。所有的類可以在jqmPhp包轉換為字符串
網站: http://www.jqmphp.com/
下載: http://code.google.com/p/jqmphp/downloads/list
UI通知框架:Backbone.Notifier
Backbone.Notifier是一個強大的UI通知框架,用於顯示和控制的UI通知。
它是建立在jQuery的頂部,Backbone.js + Underscore.js,有許多很酷的功能,如一個的3D模塊或動畫支持。
通知可以顯示在頂部或在中間,存在模式的通知,這是可以通過設置自定義樣式CSS + JS API。
要求: jQuery的,Backbone.js和Underscore.js
兼容性:所有主要的瀏覽器
網站: http://e-w.co.il/backbone.notifier/
下載: https://github.com/ewebdev/backbone.notifier/
最簡單的谷歌地圖GMaps.js整合
GMaps.js,除了添加指定經緯度的標准地圖之外,GMaps.js 還能定義地圖放大的級別,添加標注,獲取當前用戶的地理位置(HTML5 geolocation),定義路線,繪制折線,並且實現這些功能只需要簡單的幾行代碼。
另外 GMaps.js 每個動作都有 callback 函數讓你去集成自定義事件。目前 GMaps.js 沒有詳細的文檔,但是每個功能都有具體的例子,參考下基本就可以使用了。
。
Requirements: jQuery
Website: http://hpneo.github.com/gmaps/
Demo:http://hpneo.github.com/gmaps/examples.html
Download:https://github.com/HPNeo/gmaps
Chronoline.js:JavaScript庫,用於顯示圖像事件時間表
Chronoline.js是一個JavaScript庫,創建一個按時間順序的圖形時間軸的事件。
整個時間線水平方向顯示,我們可以方便的顯示任何時間長度的事件,並且提供一個tooltip來展示事件詳細內容。
的要求: Raphael.js,jQuery的,jQueryqTip2
插件兼容性:所有的現代瀏覽
JavaScript的所見即所得的編輯器拖動:Redactor
Redactor 是一個 jQuery 的插件,實現在線所見即所得的 HTML 編輯器。界面簡潔,加載速度快。不過不支持 IE6 瀏覽器,如果你不需要考慮 IE6 不妨試試。
它自動轉換到編輯器中的textarea的
領域和編輯器是所有主要的行動(文字造型,添加文件/圖像/視頻/表/列表)。
兼容性:IE6好像不支持
滾動效果的jQuery插件:SuperScrollorama
SuperScrollorama 是一個用來實現超酷的滾動動畫效果的 jQuery 插件。
實現的效果有:文字褪色,飛,旋轉,縮放,斯馬什,針腳,滑動,隱退,反彈,顏色,扔,移動,視差。
要求: All Modern Browsers
網站: http://johnpolacek.github.com/superscrollorama/
下載:https://github.com/johnpolacek/superscrollorama
下拉菜單中的圖像jQuery插件:ddSlick
ddSlick,一個免費的輕量級的jQuery插件,為創造一個更好的外觀和更多信息的圖像和說明,列表菜單的下拉菜單(列表菜單)。
它可以作為一個下拉菜單,在這里我們可以使用一個簡單的文本的圖像和說明
兼容性:所有主流瀏覽器
真棒jQuery的日歷:jQuery Verbose Calendar
jQuery Verbose Calendar 是一個可以把整年的日歷顯示在一個頁面上的 jQuery 插件,加載之后,
它會自動滾到今天的日期處,當你鼠標移動到日期上,可以顯示今天星期幾。並且這個日歷插件支持 Callback 函數,
當你點擊某個日期的時候,你可以執行一些自定義行為,或者插入任意的 HTML 元素。
要求jQuery + Tipsy & jQuery.ScrollTo plugins
兼容性All Major Browsers
網站: http://iamjpg.github.com/jQuery-Verbose-Calendar/
下載; https://github.com/iamjpg/jQuery-Verbose-Calendar
使用jQuery,現代瀏覽器的矢量圖形地圖矢量地圖:JQVMAP
JQVMap 是一個用於輸出向量地圖的 jQuery 插件,使用可改變大小的 SVG 處理,支持的瀏覽器包括:Firefox, Safari, Chrome, Opera and Internet Explorer 9. 對 IE 6-8 的版本通過 VML 支持。。
兼容性:大多數瀏覽器
JCS媒體庫(jCSML)Cross-Browser Animation
它是專門設計用於創建跨瀏覽器的動畫,而無需調整任何個別瀏覽器或平台。
能夠讓創建動畫媒體而不需要改變任何代碼,支持桌面和移動瀏覽器。它沒有使用Flash, SilverLight, SVG, HTML5, 或 奇特的CSS3動畫。
JCSML可以運行在IE7瀏覽器,Android或iPad / iPhone上。
要求: jQuery & jQuery easing library
兼容性: All Major Browsers
網站: http://jcsml.com/
演示: http://jcsml.com/pageshell.html?root=Tutorials&target=Starship#
下載: http://www.jcsml.com/pageshell.html?root=PurchasePages&target=PurchasePage&TOCEnabled=FALSE
minjs:輕量級JavaScript組件
minjs是一個獨立的JavaScript組件的集合,是建立在jQuery的,輕量級的代碼,以完成特定的工作。
minjs 是一組輕量級的 jQuery 組件,提供多種 Web 常用組件,包括表單、表格、日歷等,其中迷你表單幫助你使用 HTML5 表單增強,盡管瀏覽器不一定支持也可以使用。
目前,有3個組成部分:minform,longtable和dtcal。
minform帶來了跨瀏覽器兼容HTML5表單增強功能(屬性:占位符
,所需
和自動對焦
)。
兼容性:所有主要瀏覽器
實時陰影:jQuery-Sensitive & Realistic Shadows
Sensitive & Realistic Shadows是一個簡單而有效的jQuery插件,鼠標敏感的任何HTML元素都可以創建逼真的陰影效果。
用一個簡單的功能,它的工作原理是按照鼠標的位置針對任意數量的元素和操作的box-shadow
CSS屬性的值的元素
因此,確定陰影的位置和大小由鼠標元素操控
兼容性: All Modern Browsers
網站: http://indamix.github.com/real-shadow/
下載: https://github.com/Indamix/real-shadow/
MiniJs:寫在CoffeeScript的一套jQuery插件
MiniJS 是一組使用 CoffeeScript 編寫的 jQuery 插件
兼容性:所有主要的瀏覽器
jPages:真棒的JavaScript分頁插件
jPages是一個客戶端JavaScript分頁插件(jQuery插件),有很多的功能,如鍵盤+滾動導航,自動翻頁,延遲顯示屏和一個可定制的導航面板也集成與Animate.css和延遲加載。。
兼容性: All Major Browsers
網站: http://luis-almeida.github.com/jPages/
演示: http://luis-almeida.github.com/jPages/defaults.html
下載: https://github.com/luis-almeida/jPages