這11個有趣的 CSS 和 JavaScript 庫太實用了!

2022-01-09 前端實驗室

大家好,我是前端實驗室的小師妹!

作為一名合格的前端開發人員，如果您想節省一些時間並提高工作效率，下面這些插件庫你一定能用的上！

1. BigPicture

BigPicture 是一款輕量級且獨立於框架的 JavaScript 圖像/視頻查看器插件。可以使用<img>標籤以及背景圖像,支持 Youtube、Vimeo、直接視頻連結、 任何 iframe以及 音頻文件。

地址：https://henrygd.me/bigpicture/

2. MJML

MJML 是一種標記語言，旨在減少編寫響應式電子郵件的痛苦。它的語義語法使其變得簡單明了，其豐富的標準組件庫加快了開發時間並減輕了您的電子郵件代碼庫。

地址：https://mjml.io/

3. Baguette box

BaguetteBox.js 是一個簡單和易於使用的響應式的圖像 Lightbox 插件，支持滑動手勢在行動裝置上使用。純 JavaScript 實現，不依賴第三方庫和插件，趕緊來體驗吧。

地址：https://feimosi.github.io/baguetteBox.js/

4. Nachos UI

Nachos UI 是具有30多個組件的React Native組件庫。這些組件也可以通過react-native-web在Web上運行。它通過了快照測試，支持格式化和yarn，提供了熱火的設計和全局主題管理器。

地址：https://avocode.com/nachos-ui

5. FitVids.js

FitVids.js是一個輕量級的jQuery響應式視頻插件，他可以實現流體視頻的嵌入。FitVids.js應用了內在的比例算法，在你的響應網頁上實現視頻的流體寬度。簡單上手，可以嘗試一下看效果會不會更好~

地址：http://fitvidsjs.com/

6. multi.js

multi.js 是具有 multiple 屬性的選擇框的用戶友好替代品。它沒有依賴項，適合行動裝置，並提供搜索功能。multi.js 也很容易使用 CSS 設置樣式，並且可以選擇支持 jQuery。

地址：https://fabianlindfors.se/multijs/

7. Tent CSS

使用 gzip 時它只有 5kb。在創建響應式網站時，這個 CSS 框架非常有用，或者創建者喜歡稱之為生存工具包，它滿足所有基本的 CSS 需求。

地址：https://css.sitetent.com/

8. Anchorme

小巧、快速、高效、功能豐富的 Javascript 庫，用於檢測文本中的連結/URL/電子郵件並將它們轉換為可點擊的 HTML 連結。

地址：https://alexcorvi.github.io/anchorme.js/

9. Moveto

MoveTo 是一個 JavaScript 庫，用於在單擊按鈕時創建滾動動畫。有趣的是，這個庫在使用 gzip 壓縮時只有 1kg，並且不依賴於 jQuery 或其他任何東西。它使用起來非常簡單，並且使用 window.scroll 原生 API 來製作動畫效果很好。

地址：https://hsnaydd.github.io/moveTo/

10. Eagle.js

Eagle.js 是一個基於 Web 的 Vue.js 幻燈片框架。它支持動畫、主題、交互式小部件（用於 Web 演示），並且可以輕鬆地在演示文稿中重用組件、幻燈片和樣式。

地址：https://zulko.github.io/eaglejs-demo/#/

11. Rellax

視差風尚可能正在消失，但具有精心製作的視差的網站仍然給任何訪問者留下深刻印象。rellax.js 是一款輕量級的不需要任何依賴的純JavaScript滾動視覺差特效插件。

地址：https://dixonandmoe.com/rellax/

已經進入2022年紅包封面高峰期 

還沒進群的趕緊加入我們社群！

平時還有更多學習資料，技術分享

[有新封面第一時間發連結到群裡]

👇 在下方公眾號回復【111】獲取進群方式

相關焦點

  • 15 個有趣的 JavaScript 與 CSS 庫
    CurrencyFormatter.js　　CurrencyFormatter.js 是一款簡單實用的純 JS 格式化貨幣庫。它支持 155 種不同國家的貨幣格式，以及超過 700 種不同語言的本地化設置。
  • 15 個有趣的 JS 和 CSS 庫
    當然，如果你也發現了一些有趣、實用的庫，框架或是工具，也歡迎留言與大家一同分享。1.CurrencyMousetrap 是一個簡單、輕量的 JavaScript 庫，可用於捕獲和處理鍵盤事件。它支持 keypress、keydown 和 keyup 等鍵盤事件，適用於國際鍵盤布局和數字小鍵盤。
  • 年度最佳 JavaScript 和 CSS 開源庫推薦!
    -2017前不久，Tutorialzine 整理出了 2017 年最受用戶歡迎和喜愛的一些 JS 和 CSS 庫，供大家學習和參考。它通過快速DOM重新排序，乾淨的API和可訪問的標記提供了出色的拖放功能。Draggable附帶額外的模塊，可以添加更多的功能，如排序，交換和其他實用程序。
  • 2017 年度最佳 JavaScript 和 CSS 開源庫推薦
    開源最前線（ID：OpenSourceTop） 猿妹編譯連結：https://tutorialzine.com/2017/12/the-best-javascript-and-css-libraries-for-2017前不久，Tutorialzine 整理出了 2017 年最受用戶歡迎和喜愛的一些 JS 和 CSS 庫，供大家學習和參考。
  • 推薦10個最好的Javascript和CSS庫
    5.r2 這是流行的Node.js請求庫的更新版本。這是一個更輕量級的HTTP客戶端解決方案，它建立在瀏覽器原生的Fetch API的基礎之上，並為Node.js提供優化。 8.Devices.css展示使用純CSS創建的現代行動裝置的圖書館。
  • 推薦15個 JavaScript 和 CSS 庫
    英文： Georgi Georgiev   譯文：為之漫筆/眾成翻譯zcfy.cc/article/15-interesting-javascript-and-css-libraries-for-january
  • 2018 年你需要知道的 11 個 JavaScript 庫
    本文列舉了11個常用的庫來提高開發效率。為了保證可讀性，本文採用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。JavaScript依然是2018年最受歡迎、最流行的程式語言，所以它的生態系統也十分完善。JavaScript小小的標準庫不足以應付各種開發需求。
  • 推薦11個實用的JavaScript庫
    JavaScript 仍然是 2018 年最受歡迎和使用最為廣泛的程式語言，因此 JavaScript 生態系統也會繼續發展壯大。然而，JavaScript 的標準庫仍然繼續保持「短小精悍」的身材。為了填補標準庫功能方面的空白，在過去幾年中，GitHub 上出現了很多流行的 JavaScript 庫。以下列出了 11 個有用的庫，這些庫的維護狀態均很活躍。
  • 22 個用於網站設計的 CSS 庫
    今天我們將分享22個關於網站設計的CSS庫，希望對您的學習與網站設計、網站開發有所幫助
  • 2020年11個熱門JavaScript 庫
    框架的使用增加了代碼的模塊化和可復用性，最主要的是屏蔽了瀏覽器之間差異性的實現，使得代碼更加簡潔，目前主流的js框架有很多，各有側重，我們通常只會用到其中一小部分子功能，這裡總結了2020年11個熱門JavaScript 庫。
  • 用於UI / UX的前21個JavaScript和CSS庫
    看看這些偉大的庫，可以幫助您的應用程式添加各種酷炫效果。1. Algolia如果您想在網站上添加具有自動填充功能的表單，則應使用此庫。它準確而快速。我們特別喜歡地圖功能，它允許您在地址欄位中添加地圖以搜索位置。2.有線元素我們假設有人要求您創建一個頁面，其中的元素似乎是手繪的。要清楚，2個元素之間不應該有任何模式。有線元素就是解決方案。
  • JavaScript 即未來:介紹 14 個 JavaScript 的框架和庫
    在寫這篇文章的時候（2016 年底），Livecoding.tv 上已經有 45,919 個 用戶原創的 JavaScript 視頻教程[4] 。熱門的開源 JavaScript 框架和庫回歸到主題， 龐大的社區是 JavaScript 的一個得天獨厚的優勢，同時這也推動了 JavaScript 的蓬勃發展。
  • 2016 年 11 月 12 個輕量級的 JavaScript 庫
    egjs是一個基於jQuery的JavaScript庫包括UI交互，效果和實用程序，它以最簡單快捷的方式構建Web應用程式。6. Progressively這個庫旨在識別Web瀏覽器的詳細類型，布局引擎，作業系統，CPU架構和設備類型/模型，完全從User-Agent字符串中解析並且相對較小的佔用空間（〜11KB當縮減/〜4KB gzipped）。 採用vanilla JavaScript編寫，這意味著它不需要任何其他庫，可以獨立使用。9. Weather Map
  • 31個很棒的JavaScript庫
    /31-awesome-javascript-libraries-c8bdd78ed1dc翻譯 | web前端開發現在，NPM充滿了從小型到大型，從有用到有趣，從偉大到驚人的軟體包。這是我使用過的所有軟體包的清單，從實用程序庫到框架。請你花些時間將這些庫添加到你的書籤中，以便以後使用它們或者現在使用也可以。我希望你可以從中學習到一些新的庫。你可以ctrl+f在列表中搜索，搜索任何你需要的庫或包類型。我將盡力在說明中為每個庫包括某種通用類別。
  • 5種JavaScript和CSS交互的方法
    我們的網頁中都有.js文件和.css文件，但這並不意味著CSS和js是獨立不能交互的。下面要講的這五種JavaScript和CSS共同合作的方法你也許未必知道！如果你想創建一個動態的，風格別致的網站，這是一種非常有用的技術！classList API很多的JavaScript工具庫裡都有addClass，removeClass和toggleClass等方法。為了對老式瀏覽器的兼容，這些類庫採用的方法都是先搜索元素的className，追加和刪除這個類，然後更新className。
  • 2018年你應該知道的11個Javascript實用程序庫
    為填補這一空白，許多流行的實用程序庫在過去幾年中在GitHub上發展壯大。以下是有用且高度維護的庫的簡短列表。提示：列表中的大多數（如果不是全部）庫都可以與Bit的組件平臺結合使用，這樣您就可以單獨使用任何功能來發現，使用甚至從使用它的任何項目開發。
  • 9個非常實用的CSS圖標庫
    其優點：輕鬆的定義圖標的顏色，大小，陰影，和任何與css相關的特性。使用矢量字體，這意味著他們可以完美的顯示在高解析度顯示器中。1、Iconfont阿里巴巴矢量圖標庫，Iconfont-國內功能很強大且圖標內容很豐富的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉換等功能。阿里巴巴體驗團隊傾力打造,設計和前端開發的便捷工具。
  • 開源巨獻:年度最佳 JavaScript 和 CSS 開源庫推薦!
    Tutorialzine 每個月都會公布一次當月新增的 JS 和 CSS 庫。
  • 讓 JavaScript 與 CSS 和 Sass 對話
    這意味著我們需要從特定元素獲取計算樣式。正如我們之前在:root 中定義變量一樣，我們將它們放在 HTML 元素上。Sass 變量和 JavaScriptSass 是一種預處理語言，這意味著它在成為網站的一部分之前就已經變成了 CSS。所以無法用與 CSS 自定義屬性相同的方式從 JavaScript 訪問它們（可以在 DOM 中以計算樣式訪問它們）。
  • 11個讓你的React 應用程式更上一層樓的庫
    在這裡，與你分享11個React項目中有效且易於實現的庫，我列出的這 11 個庫，都是開箱即用的庫，它們可將你的 React 應用程式提升到一個新的水平。這個庫的標語是「It's like Lodash for Dates」和lodash類似，date-fns也有很多內置函數。