輕量高效的開源JavaScript插件和庫 【轉】

?

  • 圖片
  • 布局
  • 輪播圖
  • 彈出層
  • 音頻視頻
  • 編輯器
  • 字符串
  • 表單
  • 存儲
  • 動畫
  • 時間
  • 其它
  • 加載器
  • 構建工具
  • 測試
  • 包管理器
  • CDN

圖片

  • baguetteBox.js?- 是一個簡單易用的響應式圖像燈箱效果腳本。demo
  • Lightgallery.js?- 是一個功能齊全的JavaScript圖像燈箱插件。demo
  • viewerjs?- 是一個圖像預覽插件。demo
  • cropperjs?- 是一個圖片編輯器插件。demo
  • photo-editor?- 是一個本地圖片編輯器插件。demo
  • blazy.js?- 是一個懶惰加載插件。demo

布局

  • SuperEmbed.js?- 是一個Javascript庫,可檢測出網頁上的內嵌視頻并使他們能夠變成響應式元素。demo
  • ScrollReveal?- ScrollReveal插件使用戶能夠無比輕松地創建桌面和移動瀏覽器的網頁滾動動畫。demo
  • Bricks.js?- 是一款超快的用于固定寬度元素的“磚石”布局生成器。demo

輪播圖

  • Swipe?- 準確的觸摸滑塊。demo
  • Lory?- 是一個由 Vanilla JavaScript 編寫的擁有觸摸功能的簡約滑塊。demo
  • baguetteBox.js?- 是一個簡單、易用的響應式 Lightbox 圖片庫,它支持移動端上觸滑動手勢操作,無依賴。demo

彈出層

  • Popper.js?- 是一個輕量級的庫用于管理工具提示和彈窗效果。demo
  • SweetAlert2?- 是一個顏值很高而且可以自定義的警告彈出窗口插件,可以代替Javascript的彈出窗口。demo
  • artDialog?- 是一個經典、優雅的網頁對話框控件。demo
  • layer?- 是一個web彈層組件。demo

音頻視頻

  • Loud Links?- 是一個輕量級的JavaScript庫用于添加交互聲音到您的站點。demo
  • flv.js?- B 站 HTML5 播放器內核開源。
  • Loud Links?- 是一個輕量級 JavaScript 庫,用于向您的網站添加交互音頻。。demo

編輯器

  • MediumEditor?- 仿Medium.com的所見即所得在線編輯器工具欄。demo
  • Substance?- 是一個基于Web的內容自定義編輯器。demo
  • flatpickr?- 是一個輕量級的代碼高亮庫,適用于任何編程語言。demo
  • pen?- 是一個Markdown編輯器工具。demo
  • aceAce(Ajax.org Cloud9 Editor)。demo
  • CodeMirror瀏覽器端的代碼編輯器。demo
  • esprima用于綜合分析的 ECMAScript 解析器。demo
  • quill一個帶有 API 的跨瀏覽器富文本編輯器。(demo)
  • ckeditor-releases?適用于每個人的 web 文本編輯器。demo
  • editor?一個 markdown 編輯器,但仍在開發中。demo
  • EpicEditor?一個可嵌入的 js Markdown的編輯器,擁有全屏編輯、即時預覽、自動保存草稿和離線支持等功能。demo
  • jsoneditor?查看、編輯和格式化 JSON 的 web 工具。demo
  • vim.js??擁有持久化 ~/.vimrc 的 Vim 編輯器的?JavaScript 移植版本。demo
  • Squire?HTML5 富文本編輯器。demo
  • TinyMCE?JavaScript 富文本編輯器。demo
  • trix?由 Basecamp 制作,適用于每天寫作的富文本編輯器。demo
  • Editor.md?由 Basecamp 制作,適用于每天寫作的富文本編輯器。demo

字符串

  • selecting?- 一個允許你獲取用戶選定文本的庫。
  • string.js?- 額外的 JavaScript 字符串方法。demo
  • he?- 健壯的 HTML 實體編碼/解碼器。
  • multiline?- 多行字符串。
  • query-string?- 解析和字符串化 URL 查詢字符串。
  • URI.js?- URL 操作庫。demo
  • jsurl?- 輕量的 URL 操作庫。
  • sprintf.js?- 實現字符串格式化。
  • url-pattern?- 讓 url 和其它字符串進行比正則表達式匹配更簡單。字符串和數據可相互轉化。
  • Numeral.js?- 格式化和操作數字的 JS 庫。?demo

表單

  • validator.js?- 輕量級的JavaScript表單驗證,字符串驗證。demo
  • List.js?- 是一個輕量級的為列表、表格或其他任何HTMLL標簽增加了搜索,排序,過濾器和靈活性等元素。demo
  • Algolia Places?- 是一個能讓你在網頁輕易實現搜索欄自動完成功能。demo
  • Cleave.js?- 是一個會在你輸入時格式化你的<input/>標簽里面的內容。demo
  • validator.js?- 是一個簡單、輕量級,但功能強大的 Validator 組件。demo
  • axios?- 是一個基于瀏覽器和node的HTTP請求庫,綠色環保只有12kb。

存儲

  • store.js?- 本地存儲localstorage的封裝,提供簡單的API。demo
  • cookie.js?- 對操作cookie的封裝,提供簡單的AIP 兼容IE6。demo
  • store.js?- 為所有瀏覽器封裝了LocalStorage,隱秘地使用localStorage、globalStorage和用戶數據。
  • localForage?- 改善后的離線存儲。封裝了IndexedDB、WebSQL和localStorage。demo
  • cross-storage?- 獲得權限后,能跨域名本地存儲。
  • basket.js?- 用 localStorage 加載和緩存腳本的資源加載器。demo
  • bag.js?- 可以緩存腳本和加載資源,增加了鍵值對接口和對localStorage/websql/indexedDB 的支持。
  • basil.js?- 智能的?JavaScript 數據持久層庫。
  • Cookies?- 客戶端 Cookie 操作庫。
  • DB.js?- 基于 Promise 的、封裝了 IndexedDB 的庫。demo
  • lawnchair.js?- 簡單的客戶端 JSON 存儲。demo

動畫

  • anime.js?- 是一個靈活輕便的JavaScript動畫庫。demo
  • three.js?- 是一個JS 3D庫。demo
  • loaders.css?- CSS 動畫加載效果。demo
  • Hover.css?- 一款基于 CSS3 的懸停特效合集。demo
  • Effeckt.css?- 一個包含眾多精妙的 CSS3 切換和動畫效果庫。demo
  • Magic Animations?- 一個獨特的 CSS3 動畫特效包。demo
  • Transformicons?- 一個結合 SVG、CSS 和 HTML 技術,讓圖標、按鈕和符號具有變種(特殊)動畫效果的庫。demo
  • SpinKit?- 一款 CSS 加載動畫合集,可高度自定義動畫效果。demo
  • d3-ease?- 這是一個讓動畫更為平滑的 Easing 庫。
  • ScrollMagic?- 一個用來創建魔幻滾動交互的 JavaScript 庫,可以像使用進度條一樣使用滾動條。demo
  • ScrollReveal?- 一款頁面滾動顯示動畫,可以播放一次也可以播放無限次,能讓頁面更加有趣,更吸引用戶眼球。。demo
  • RELLAX.js?- 是一款主打輕量級的純 JavaScript 視差效果庫。demo
  • CountUp.js?- 可以用來快速創建以一種更有趣的動畫方式顯示數值數據。demo
  • Dynamics.js?- 可以創建物理運動動畫效果 JavaScript 庫。demo
  • Mojs?- 一個擁有極簡的聲明式 API ,能夠輕松掌控運動軌跡,為運動圖形而生的工具庫。demo
  • React FLIP Move?- 一個翻轉移動的庫,旨在解決當列表的順序發生變化時,項目列表動畫化的問題。demo
  • tween.js?- 是一個JS 平滑動畫庫。demo
  • vivus?- JavaScript庫,使SVG繪制動畫。demo
  • Choreographer-js?- 是一個用于處理復雜動畫的簡單庫。demo
  • minirefresh?- 優雅的H5下拉刷新。零依賴。demo

時間

  • moment?- 是一個日期處理類庫,用于解析、檢驗、操作、以及顯示日期。demo
  • timesheet.js?- 是一個時間展示片段插件。demo
  • date.js?- 是一個格式化時間、過去時間展示、解決因時區變更插件。
  • timeago.js?- 格式化時間顯示多久以前的插件。?demo
  • rome?- 可定制的日期(和時間)選擇器。無依賴,可選 UI。?demo
  • moment-timezone?- 基于 moment.js 的時區庫。demo
  • date?- 擁有人性化的 Date() 方法。demo
  • ms.js?- 小巧的毫秒轉換工具。

其它

  • hotkeys?- 是一個強健的 Javascript 庫用于捕獲鍵盤輸入和輸入的組合鍵。demo
  • clipboard.js?- 現代復制到剪貼板。沒有Flash,gzip壓縮只有3KB 。demo
  • translater.js?- 這是一個利用HTML注釋的頁面翻譯解決方案。demo
  • Push.js?- 是一個跨瀏覽器的Javascript桌面通知插件。demo
  • onlinenetwork?- js判斷是否斷網了。
  • iNotify?- 是一個實現瀏覽器的 title 閃爍、滾動、聲音提示、chrome、等系統通知。demo
  • tesseract.js?- 是一個文字識別轉換,可以運行在瀏覽器和服務器NodeJS上。demo
  • Leaflet.js?- 是一個開源的移動友好交互式地圖 JavaScript 庫。體積僅有 33 KB。demo
  • CurrencyFormatter.js?- 是一款簡單純JS格式化155種不同國家貨幣格式庫,gzip壓縮后僅7KB。demo
  • Feature.js?- 是一個快速、簡單、輕量級的瀏覽器功能檢測庫。它沒有任何的依賴,并且 gzip 壓縮后僅有1kb。demo
  • screenfull.js?- 極小、跨平臺的 JavaScript 全屏插件。demo

加載器

  • requirejs?- JS模塊化工具
  • SeaJS?- JavaScript模塊加載框架
  • loadjs?- JavaScript模塊加載框架
  • ESL?- 瀏覽器端AMD標準加載器

構建工具

  • webpack?- 前端構建工具
  • Gulp?- 自動化構建工具
  • Babel?- 下一代JavasScript語法編譯器
  • PostCSS?- 利用JS插件轉換CSS樣式的工具
  • Grunt?- JavaScript世界的構建工具
  • rollup.js?- JS模塊打包器
  • webpack-dashboard?- webpack開發服務器的CLI儀表板
  • traceur-compiler?- 支持ES6的JS編譯器
  • brunch?- 超快的HTML5構建工具
  • Helium-css?- 顯示網站中未使用的CSS

測試

  • mocha?- JavaScript 測試框架
  • ESLint?- JavaScript代碼檢查工具
  • JSHint?- JavaScript語法和風格檢查工具
  • casperjs?- 開源的導航腳本處理和測試工具
  • Nightwatch?- 用戶界面自動化測試框架
  • istanbul?- JS代碼覆蓋工具
  • intern?- JavaScript測試系統
  • benchmark.js?- 強大的JavaScript基準庫
  • loadtest?- HTTP或WebSockets URL的負載測試
  • JSCover?- JavaScript代碼覆蓋測量工具

包管理器

  • yarn?- 新的 Hadoop 資源管理器
  • bower?- web包管理器
  • npm?- NodeJS包安裝的管理模塊
  • ndm?- npm桌面管理器

CDN

  • https://cdnjs.com
  • http://cdnjs.net
  • http://www.jsdelivr.com
  • http://unpkg.com
  • http://rawgit.com
  • http://staticfile.org
  • http://www.bootcdn.cn
  • http://cdn.baomitu.com
  • http://lib.sinaapp.com
  • http://cdn.code.baidu.com
  • http://jscdn.upai.com
  • https://www.asp.net/ajax/cdn
  • http://libs.sun0769.com
  • https://css.net
  • https://developers.google.com/speed/libraries/

轉載于:https://www.cnblogs.com/chenqingwei/p/8883532.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/452920.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/452920.shtml
英文地址,請注明出處:http://en.pswp.cn/news/452920.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Linux內核中的常用宏container_of其實很簡單【轉】

轉自&#xff1a;http://blog.csdn.net/npy_lp/article/details/7010752 開發平臺&#xff1a;Ubuntu11.04 編 譯器&#xff1a;gcc version 4.5.2 (Ubuntu/Linaro4.5.2-8ubuntu4) Container_of在Linux內核中是一個常用的宏&#xff0c;用于從包含在某個結構中的指針獲得結構本…

mysql concat例子_MYSQL中CONCAT詳解

concat()函數1. 功能&#xff1a;返回結果為連接參數產生的字符串。如有任何一個參數為NULL &#xff0c;則返回值為 NULL。2. 語法concat(str1, str2,...)3. 例子案例一&#xff1a;mysql> select concat(蘋果,香蕉,梨子);------------------------------| CONCAT(蘋果,香蕉…

常見的狀態響應碼

200&#xff1a;請求正常&#xff0c;服務器正常的返回數據 301&#xff1a;永久重定向。比如在訪問www.jingdong.com的時候&#xff0c;會重定向到www.jd.com。 302&#xff1a;臨時重定向。比如在訪問一個需要登錄的界面時&#xff0c;而此時沒有登錄&#xff0c;那么就會重定…

軟件行業為什么那么多項目經理

記得聽誰說過&#xff0c;軟件行業的項目經理太濫了&#xff0c;二十幾歲的毛頭小伙子&#xff0c;動不動就是項目經理&#xff0c;手下沒幾個人&#xff0c;管的也沒幾個事&#xff0c;在其他行業&#xff0c;項目經理一般都是四五十歲的老頭子做&#xff0c;要聯系這&#xf…

ipv6的表示方法

v冒分十六進制表示法X:X:X:X:X:X:X:X 其中X表示地址中16位二進制數的十六進制值 例&#xff1a;FEDC:BA98:7654:3210:FEDC:BA98:7654:3210 v零壓縮法如其中有多個連續的零&#xff0c;則可用零壓縮法 如 &#xff1a;1080:0000:0000:0000:0008:0800:200C:417A 可寫成&am…

mysql php7安裝配置_centos7無網絡下安裝部署php7.1.33+mysql5.7.28+apache2.4.6-Go語言中文社區...

centos7無網絡下安裝部署php7.1.33mysql5.7.28apache2.4.6一、1、先ping www.baidu.com&#xff0c;root賬戶下&#xff0c;如果未聯網&#xff0c;創建目錄&#xff0c;把提前下載好的rpm包拷貝到rpm目錄下如圖&#xff1a;(如果沒有安裝包請查看我的另一篇教程下載這些安裝包…

webkit渲染

2019獨角獸企業重金招聘Python工程師標準>>> 參考鏈接 理解WebKit和Chromium 簡明魔法學院 Chrome軟件渲染 WebKit渲染基礎 Webkit 渲染基礎 Webkit不是瀏覽器,它是一個渲染引擎 軟件渲染 硬件渲染(GPU加速) 會觸發GPU加速的屬性 CSS3 3D transformation, trans…

element ui中dialog相關問題

一&#xff0c;今天需要在dialog里面引入另一個頁面&#xff0c;就是打開dialog顯示該頁面&#xff08;把頁面放到dialog中&#xff09;&#xff0c;引入的語句如下&#xff1a; <iframe src"view?pathrkdj_b" ></iframe> 二&#xff0c;使用table組件時…

數據結構與算法--4.使用堆棧模擬隊列

問題&#xff1a; 隊列的插入和刪除遵循先入先出的原則&#xff0c;而堆棧遵循后進先出的原則。用兩個堆棧模擬隊列&#xff0c;要求實現時不能分配超過O&#xff08;1&#xff09;的內存&#xff0c;時間復雜度必須是o&#xff08;m&#xff09;。 思路&#xff1a; 用兩個…

IT行業的你,在成本部門還是利潤部門

題外話&#xff1a;本文應該引起項目管理者和開發人員的思考&#xff1a;如何進行薪酬管理&#xff1f;如何規劃職業生涯&#xff1f; 生在IT行業&#xff0c;發現周圍很多朋友對薪酬問題有疑問&#xff0c;因為這種不解&#xff0c;導致經常帶情緒&#xff0c;對工作、生活很…

ipv4到ipv6的過渡

v雙協議站&#xff1a;過渡時期&#xff0c;站點必須同時支持IPv4和IPv6v隧道技術&#xff1a;IPv6主機之間通信必須使用IPv4的隧道v首部轉換&#xff1a;用于發送方使用IPv6&#xff0c;而接收方使用IPv4

關于爬蟲中常見的兩個網頁解析工具的分析 —— lxml / xpath 與 bs4 / BeautifulSoup...

http://www.cnblogs.com/binye-typing/p/6656595.html 讀者可能會奇怪我標題怎么理成這個鬼樣子&#xff0c;主要是單單寫 lxml 與 bs4 這兩個 py 模塊名可能并不能一下引起大眾的注意&#xff0c;一般講到網頁解析技術&#xff0c;提到的關鍵詞更多的是 BeautifulSoup 和 xpat…

java如何去掉html標簽_Java后端去掉HTML標簽獲取純文本-Fun言

今天又對我的博客首頁進行了一次版本的更新&#xff0c;使其自適應屏幕&#xff0c;獲得更好的用戶體驗&#xff0c;然后就出現點小問題&#xff0c;那就是原來的摘要是人為添加的&#xff0c;有長有短&#xff0c;對自適應屏幕有影響&#xff0c;所以我們現在是截取文章的前20…

單/雙中括號與測試條件

測試命令 tesst[]內置命令[[]]bash中的關鍵字 單中括號 格式[#express1#op#express2#] 注意&#xff1a;   其中#代表括號不能省略   不能匹配模式   變量引用應用雙引號括起&#xff0c;尤其當變量引用有空格時   與或非形式-a –o -not   常量應用單/雙引號括起  …

暗時間--平凡與優秀間的距離

每個人都希望&#xff0c;在他所從事的領域很優秀&#xff0c;那么如何才能優秀呢&#xff1f;有人做過一個研究&#xff0c;說那些優秀的音樂家&#xff0c;在他們成名之前&#xff0c;已經訓練過10000小時。有人可能成功得早&#xff0c;如莫扎特16歲&#xff0c;有些可能需要…

IP分組

IP分組就是根據Ip地址來進行分組&#xff0c;目的可以是為了對不同 的地址組分配不同的帶寬&#xff08;限速&#xff09;配置地址組時&#xff0c;其輸入格式為A.B.C.D-A.B.C.E&#xff0c;例如&#xff1a;192.168.1.1-192.168.1.250

python3基礎3--數據類型--數據運算--表達式if -else-while-for

一、python3 數據類型 1.1 數字例如&#xff1a;1,2,3,4等1.2 int&#xff08;整型&#xff09; 在32位機器上&#xff0c;整數的位數為32位&#xff0c;取值范圍為-2**31&#xff5e;2**31-1&#xff0c;即-2147483648&#xff5e;2147483647在64位系統上&#xff0c;整數的位…

spark java教程_(Spark)學習進度十四(Spark之Java獨立應用編程)

環境如下:(更新了林子雨教程中不可使用的部分) Hadoop 2.6.0以上 java JDK 1.7以上 Spark 3.0.0-preview2 二、java獨立應用編程(在下載依賴jar包的過程中如遇到卡頓現象可以Ctrl+C停止下載,然后重新執行本條命令即可繼續下載相應的依賴jar包) 1、安裝maven ubuntu中沒有自帶…

nowcoderD Xieldy And His Password

題意:一個01序列,長度1e6,問有多少子串十進制是3的倍數 題解:DP[i][j]代表前i個并且以i為結尾,且十進制%3j的串的個數 #include<bits/stdc.h> #define maxn 1001000 using namespace std; char s[maxn]; long long dp[maxn][3], sum; int main(){while(~scanf("%s&q…

3D電視,你知道多少?

1.3D電視常見知識 系統概述篇 1、 什么是3D電視&#xff1f; 答&#xff1a;3D電視是一種能夠模擬實際景物的真實空間關系的新型電視&#xff0c;它利用人眼的視覺特性產生立體感&#xff0c;讓觀眾感受到觀看的影像是具有深度特性的三維立體場景&#xff0c;觀眾對延伸于屏幕…