推荐介绍多少个好玩的,史上最全

2018 年 2 月 15 个有趣的 JavaScript 和 CSS 库

2018/02/27 · CSS,
JavaScript ·

原来的小说出处: Georgi
Georgiev   译文出处:开源中国   

咱俩在Tutorialzine上的职务正是让你询问最新最酷的Web发展趋势。这就是为什么大家各样月都会发表部分大家偶尔发现并认为值得您珍重的特等能源的来由。

亚洲必赢官网 1

大家在Tutorialzine上的天职正是让您询问最新最酷的Web发展趋势。那就是干吗大家各样月都会发布部分大家有时发现并以为值得你尊崇的一流财富的缘由。

亚洲必赢官网 2

图片

  • baguetteBox.js –
    是2个容易易行易用的响应式图像灯箱效果脚本。demo
  • Lightgallery.js –
    是1个功效齐全的JavaScript图像灯箱插件。demo
  • viewerjs –
    是二个图像预览插件。demo
  • cropperjs –
    是贰个图纸编辑器插件。demo
  • photo-editor –
    是3个本地图片编辑器插件。demo
  • 推荐介绍多少个好玩的,史上最全。blazy.js –
    是四个懈怠加载插件。demo

Direction Reveal (方向展现)

该插件检查和测试光标进入或离开块时的自由化,允许你采用各样酷炫特效和连接。它提供了部分开箱即用的CSS动画,让您能够轻松成立和谐的CSS动画。

亚洲必赢官网 3

亚洲必赢官网 4

推荐多少个有趣的 JavaScript 和 CSS
库,效果挺好的,若是您当作前端开发工程师,那一个内容还不明白,就有点吃亏咯。

布局

  • SuperEmbed.js –
    是一个Javascript库,可检查和测试出网页上的内嵌录制并使他们能够成为响应式成分。demo
  • ScrollReveal –
    ScrollReveal插件使用户能够无比轻松地成立桌面和平运动动浏览器的网页滚动动画。demo
  • Bricks.js –
    是一款超快的用来固定宽度成分的“砖石”布局生成器。demo

Carbon

Carbon允许你创建并分享代码组成的精粹图像。你所要求做的正是将您的代码粘贴到编辑器中,或直接本人编排代码。你能够因此转移字体样式、编辑器宗旨、语法高亮和居然窗口按钮来自定义图像的外观。

亚洲必赢官网 5

Direction Reveal

亚洲必赢官网 6

轮播图

  • Swipe –
    准确的触动滑块。demo
  • Lory –
    是一个由 Vanilla JavaScript
    编写的具备触摸功效的简易滑块。demo
  • baguetteBox.js –
    是叁个回顾、易用的响应式 Lightbox
    图片库,它帮忙活动端上触滑动手势操作,无依靠。demo

Аxios

Axios为拍卖HTTP请求提供了二个现代化的JavaScript化解方案。它有二个基于Promise的API,在拍卖async调用时使您的代码越发结构化。该库可以在浏览器中劳作,也足以在node.js环境中劳作。

亚洲必赢官网 7

该插件检查和测试光标进入或离开块时的倾向,允许你选择种种酷炫特效和接通。它提供了一些开箱即用的CSS动画,让你可以轻松创设本身的CSS动画。

Direction Reveal (方向显示)

该插件检查和测试光标进入或离开块时的取向,允许你利用种种酷炫特效和连通。它提供了一些开箱即用的CSS动画,让您能够轻松创设和谐的CSS动画。

亚洲必赢官网 8

弹出层

  • Popper.js –
    是三个轻量级的库用于管理工科具提示和弹窗效果。demo
  • SweetAlert2 –
    是3个相貌很高而且可以自定义的警告弹出窗口插件,能够代表Javascript的弹出窗口。demo
  • artDialog –
    是二个经文、优雅的网页对话框控件。demo
  • layer –
    是3个web弹层组件。demo

Jarvis

一款基于Webpack仪表板的智能浏览器,它能够给您来得你在webpack营造所需的全部重庆大学音讯。它向您出示了您的能源在12种不一致的总是类型中的表现怎么着,你项目中持有包的轻重缓急,并有所3个妙不可言的失实输出。它仍居于beta版本,推断会增多很多新作用。

亚洲必赢官网 9

Carbon

Carbon

亚洲必赢官网 10

音频录像

  • Loud
    Links –
    是三个轻量级的JavaScript库用于添加交互声音到您的站点。demo
  • flv.js –
    B 站 HTML5 播放器内核开源。
  • Loud
    Links –
    是三个轻量级 JavaScript
    库,用于向你的网站添加交互音频。。demo

Toast UI编辑器

那是1个markdown和WYSIWYG编辑器,允许你在编码时轻松地在markdown和所见即所得情势之间切换。它提供了渲染后HTML的实时预览,即时语法错误检查以及markdown和预览格局之间的三头滚动。该编辑器还辅助有力的恢弘,如颜色选用器、图表代码块、UML代码块等。

亚洲必赢官网 11

Carbon允许你创制并享受代码组成的姣好图像。你所急需做的正是将你的代码粘贴到编辑器中,或直接本身编排代码。你能够透过改动字体样式、编辑器宗旨、语法高亮和居然窗口按钮来自定义图像的外观。

Аxios

Axios为处理HTTP请求提供了三个现代化的JavaScript解决方案。它有一个基于Promise的API,在拍卖async调用时使你的代码特别结构化。该库能够在浏览器中劳作,也足以在node.js环境江苏中华工程公司作。

亚洲必赢官网 12

编辑器

  • MediumEditor –
    仿Medium.com的所见即所得在线编辑器工具栏。demo
  • Substance –
    是贰个依据Web的情节自定义编辑器。demo
  • flatpickr –
    是多个轻量级的代码高亮库,适用于其它编程语言。demo
  • pen –
    是3个马克down编辑器工具。demo
  • aceAce(Ajax.org
    Cloud9
    Editor)。demo
  • CodeMirror浏览器端的代码编辑器。demo
  • esprima用以综合分析的
    ECMAScript
    解析器。demo
  • quill2个含有
    API
    的跨浏览器富文本编辑器。(demo)
  • ckeditor-releases
    适用于各种人的 web
    文本编辑器。demo
  • editor
    1个 markdown
    编辑器,但仍在付出中。demo
  • EpicEditor
    多少个可停放的 js
    马克down的编辑器,拥有全屏编辑、即时预览、自动保存草稿和离线扶助等效用。demo
  • jsoneditor
    查看、编辑和格式化 JSON 的 web
    工具。demo
  • vim.js
    拥有持久化 ~/.vimrc 的 Vim 编辑器的 JavaScript
    移植版本。demo
  • Squire
    HTML5
    富文本编辑器。demo
  • TinyMCE
    JavaScript
    富文本编辑器。demo
  • trix
    由 Basecamp
    制作,适用于每一天创作的富文本编辑器。demo
  • Editor.md
    由 Basecamp
    制作,适用于每天创作的富文本编辑器。demo

Micron.js

Micron是2个同意你为DOM成分添加分化的CSS增强动画的库。个中交互可以经过HTML数据属性或通过链接JavaScript方法来安装速度、化解和别的选项来支配。它辅助分化的交互,如摇晃、褪色、反弹、摇摆(shake,
fade, bounce, swing)等等。

亚洲必赢官网 13

Аxios

Jarvis

一款基于Webpack仪表板的智能浏览器,它能够给您来得你在webpack创设所需的全数重庆大学消息。它向您出示了您的能源在12种差异的接连类型中的表现怎样,你项目中保有包的轻重缓急,并持有2个完好无损的荒唐输出。它仍居于beta版本,臆想会增多很多新效率。

亚洲必赢官网 14

字符串

  • selecting –
    二个同意你拿走用户选定文本的库。
  • string.js –
    额外的 JavaScript
    字符串方法。demo
  • he –
    健壮的 HTML 实体编码/解码器。
  • multiline –
    多行字符串。
  • query-string –
    解析和字符串化 UPAJEROL 查询字符串。
  • URI.js –
    URL
    操作库。demo
  • jsurl –
    轻量的 URL 操作库。
  • sprintf.js –
    完结字符串格式化。
  • url-pattern –
    让 url
    和其它字符串进行比正则表明式匹配更简明。字符串和数据可相互转化。
  • Numeral.js –
    格式化和操作数字的 JS 库。
    demo

lit

Lit是三个要命小和响应式CSS框架。它包罗12列响应式网格、不相同的排印风格、自定义输入、二种按钮类型以及CSS框架应该提供的具有机能。Lit适用于拥有现代浏览器,以及IE11等部分较旧的浏览器

亚洲必赢官网 15

Axios为处理HTTP请求提供了一个现代化的JavaScript化解方案。它有二个基于Promise的API,在处理async调用时使你的代码尤其结构化。该库能够在浏览器中央银行事,也得以在node.js环境中劳作。

Toast UI编辑器

那是多个markdown和WYSIWYG编辑器,允许你在编码时轻松地在markdown和所见即所得格局里面切换。它提供了渲染后HTML的实时预览,即时语法错误检查以及markdown和预览情势里面包车型大巴同台滚动。该编辑器还帮忙有力的扩张,如颜色选拔器、图表代码块、UML代码块等。

亚洲必赢官网 16

表单

  • validator.js –
    轻量级的JavaScript表单验证,字符串验证。demo
  • List.js –
    是二个轻量级的为列表、表格或别的任何HTMLL标签扩展了查找,排序,过滤器和灵活性等成分。demo
  • Algolia
    Places –
    是三个能让你在网页轻易完毕搜索栏自动实现功用。demo
  • Cleave.js –
    是一个会在你输入时格式化你的<input/>标签里面包车型大巴始末。demo
  • validator.js –
    是3个简练、轻量级,但作用强大的 Validator
    组件。demo
  • axios –
    是三个依据浏览器和node的HTTP请求库,暗黑环境保护唯有12kb。

Minimal Mistakes

Minimal
Mistakes是3个心灵手巧的双列Jekyll宗旨,可用以个人网站、博客及其若干整合。它是一心可定制的,100%响应式的和针对性查找引擎优化的。它兼具九种不一样的水彩变化,三种响应式布局以及大批量放置和可随时使用的零件。

亚洲必赢官网 17

亚洲必赢官网 18

Micron.js

Micron是2个同意你为DOM成分添加不一样的CSS增强动画的库。在那之中交互能够经过HTML数据属性或透过链接JavaScript方法来安装速度、消除和其余选项来支配。它辅助分化的交互,如摇晃、褪色、反弹、摇摆(shake,
fade, bounce, swing)等等。

亚洲必赢官网 19

存储

  • 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

Tachyons

应用塔赫yons,你可以制作雅观且响应速度快的界面,并且大概不需求CSS。它很简单选择和定制,移动优先,并能很好地与React、Ember、Angular和任何框架合营使用。更首要的是,它可怜轻量级,并且具有万分详细的文书档案,你能够在内部找到所需的整套。

Jarvis

lit

Lit是3个不行小和响应式CSS框架。它富含12列响应式网格、差别的排印风格、自定义输入、三种按钮类型以及CSS框架应该提供的具有机能。Lit适用于全体现代浏览器,以及IE11等部分较旧的浏览器

亚洲必赢官网 20

动画

  • anime.js –
    是多少个灵活便捷的JavaScript动画库。demo
  • three.js –
    是一个JS
    3D库。demo
  • loaders.css –
    CSS
    动画加载效果。demo
  • Hover.css –
    一款基于 CSS3
    的甘休特效合集。demo
  • Effeckt.css –
    多个包括众多秀气的 CSS3
    切换和动画片效果库。demo
  • Magic
    Animations –
    1个出奇的 CSS3
    动画特效包。demo
  • Transformicons –
    叁个结缘 SVG、CSS 和 HTML
    技术,让图标、按钮和标记具有变种(特殊)动画效果的库。demo
  • SpinKit –
    一款 CSS
    加载动画合集,可高度自定义动画效果。demo
  • d3-ease –
    这是1个让动画更为平滑的 Easing 库。
  • ScrollMagic –
    2个用来创制魔幻滚动交互的 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 –
    是3个用以拍卖千丝万缕动画的简单库。demo
  • minirefresh –
    优雅的H5下拉刷新。零依赖。demo

亚洲必赢官网 21

亚洲必赢官网 22

Minimal Mistakes

Minimal
Mistakes是1个心灵手巧的双列Jekyll大旨,可用来个人网站、博客及其若干结缘。它是一点一滴可定制的,100%响应式的和指向查找引擎优化的。它有着九种差异的颜料变化,几种响应式布局以及大气内置和可随时使用的组件。

亚洲必赢官网 23

时间

  • moment –
    是二个日期处理类库,用于解析、检验、操作、以及展现日期。demo
  • timesheet.js –
    是1个年华展现片段插件。demo
  • date.js –
    是三个格式化时间、过去时间体现、化解因时区变更插件。
  • timeago.js –
    格式化时间展现多长期从前的插件。
    demo
  • rome –
    可定制的日子(和时间)选用器。无依靠,可选 UI。
    demo
  • moment-timezone –
    基于 moment.js
    的时区库。demo
  • date –
    拥有人性化的 Date()
    方法。demo
  • ms.js –
    小巧的飞秒转换工具。

Wiki.js

Wiki.js 是一个强大的Wiki
App,基于Node.js、Git和马克down开发。你能够利用内置编辑器用马克down格式来写作,并且能够活动同步到您的Git仓库。Wiki.js
有完全的访问控制和安顿管理,但只占用很少的CPU财富。

Toast UI编辑器

Tachyons

利用塔赫yons,你能够创制能够且响应速度快的界面,并且大致不供给CSS。它很不难选用和定制,移动优先,并能很好地与React、Ember、Angular和其余框架协作使用。更首要的是,它特别轻量级,并且有所11分详细的文书档案,你能够在中间找到所需的上上下下。

越来越多网页前端开发,行业资源音信,面试技巧,欢迎关怀群众号:网页前端开发学习
搜索公众号:qdkfmiji

其它

  • hotkeys –
    是1个年轻力壮的 Javascript
    库用于捕获键盘输入和输入的组合键。demo
  • clipboard.js –
    现代复制到剪贴板。没有Flash,gzip压缩唯有3KB
    。demo
  • translater.js –
    那是二个选取HTML注释的页面翻译化解方案。demo
  • Push.js –
    是1个跨浏览器的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 –
    是3个飞跃、简单、轻量级的浏览器作用检查和测试库。它并未其他的信赖,并且
    gzip
    压缩后仅有1kb。demo
  • screenfull.js –
    相当小、跨平台的 JavaScript
    全屏插件。demo

亚洲必赢官网 24

那是3个markdown和WYSIWYG编辑器,允许你在编码时轻松地在markdown和所见即所得格局之间切换。它提供了渲染后HTML的实时预览,即时语法错误检查以及markdown和预览方式里面包车型大巴联合滚动。该编辑器还扶助有力的扩张,如颜色选择器、图表代码块、UML代码块等。

加载器

  • requirejs –
    JS模块化学工业具
  • SeaJS –
    JavaScript模块加载框架
  • loadjs –
    JavaScript模块加载框架
  • ESL –
    浏览器端速龙标准加载器

Phaser

Phaser是3个神速的开源框架,能够支付为运维在桌面浏览器或手提式有线电电话机浏览器的HTML5娱乐。你也足以为iOS、Android和任何分裂的当地应用程序创立游戏。Phaser有对开发人士万分友善的API,并且Phaser的团组织也积极付出和保险。近期,在Phaser
3.0本子中发表了许多新的特征和职能。

亚洲必赢官网 25

亚洲必赢官网 26

构建筑工程具

  • 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

SweetAlert 2

SweetAlert2
是叁个能够成立优质和可响应弹出框的库。SweetAlert2是莫斯中国科学技术大学学可定制的,百分百响应式并且在拥有显示屏尺寸上都能有很好的体现效果。使用SweetAlert2 你能够成立各个差异的有着惊艳的风骨、展现效果和卡通的弹出框。

亚洲必赢官网 27

Micron.js

测试

  • mocha –
    JavaScript 测试框架
  • ESLint –
    JavaScript代码检查工具
  • JSHint –
    JavaScript语法微风格检查工具
  • casperjs –
    开源的领航脚本处理和测试工具
  • Nightwatch –
    用户界面自动化测试框架
  • istanbul –
    JS代码覆盖工具
  • intern –
    JavaScript测试系统
  • benchmark.js –
    强大的JavaScript基准库
  • loadtest –
    HTTP或WebSockets ULX570L的负载测试
  • JSCover –
    JavaScript代码覆盖度量工具

Rekit

Rekit是一款可协助您利用React、Redux和React-router创立美好的响应式Web应用程序的工具包。该框架提供了多个用于拍卖框架的强大工具
— 三个名为Rekit
Studio的全职能IDE,以及一个用来在终端上干活的恢弘命令行界面。

亚洲必赢官网 28

Micron是叁个同意你为DOM成分添加差别的CSS增强动画的库。在那之中交互能够透过HTML数据属性或透过链接JavaScript方法来设置速度、解决和任何采取来控制。它援救差别的互相,如摇晃、褪色、反弹、摇摆(shake,
fade, bounce, swing)等等。

包管理器

  • yarn –
    新的 Hadoop 财富管理器
  • bower –
    web包管理器
  • npm –
    NodeJS包安装的管制模块
  • ndm –
    npm桌面管理器

亚洲必赢官网 ,Nerd字体

那是1个风靡字体和图标的会晤。它涵盖叁拾5个补充字种类列,以及源于诸如Font
Awesome、Devicons、Octicons等流行图标集的1300多个图形和图标。全部字体在Linux、macOS和Windows上格外。

亚洲必赢官网 29

亚洲必赢官网 30

CDN

  • 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/

更加多优异,尽在江湖

Vue相关开源项目库汇总(史上最全)

破解[优酷|腾讯|乐视|爱奇艺]等VIP或会员录制

分享Mac最强劲的虚拟机软件ParallelsDesktop最新破解版

激活IDEA,Webstorm等Jetbrains旗下拥有产品

Axure 科雷傲P
8.0正式版激活码(产品老董必备)

Kutt.it

Kutt是2个免费的能够用来减少你的ULANDL、管理链接和装置自定义域的开源库。它有3个简单使用的API,并同意你创建和删除U牧马人L,以及利用详细总计消息跟踪它们。

1 赞 3 收藏
评论

亚洲必赢官网 31

lit

Lit是3个十分的小和响应式CSS框架。它含有12列响应式网格、差别的排印风格、自定义输入、三种按钮类型以及CSS框架应该提供的全部成效。Lit适用于具有现代浏览器,以及IE11等一些较旧的浏览器

亚洲必赢官网 32

Minimal Mistakes

Minimal
Mistakes是二个心灵手巧的双列Jekyll宗旨,可用于个人网站、博客及其若干结缘。它是全然可定制的,100%响应式的和指向查找引擎优化的。它拥有九种分裂的颜料变化,两种响应式布局以及大气停放和可每一日使用的组件。

亚洲必赢官网 33

Tachyons

选取塔赫yons,你能够创设美丽且响应速度快的界面,并且差不离不须求CSS。它很不难采用和定制,移动优先,并能很好地与React、Ember、Angular和任何框架合营使用。更首要的是,它万分轻量级,并且拥有尤其详尽的文书档案,你能够在里面找到所需的一切。

亚洲必赢官网 34

Wiki.js

Wiki.js 是二个无敌的Wiki
App,基于Node.js、Git和马克down开发。你能够行使内置编辑器用Markdown格式来写作,并且能够活动同步到你的Git仓库。Wiki.js
有完全的访问控制和安排水管道理,但只占用很少的CPU财富。

亚洲必赢官网 35

Phaser

Phaser是2个火速的开源框架,能够支付为运营在桌面浏览器或手提式无线电话机浏览器的HTML5游乐。你也足以为iOS、Android和其余分化的地点应用程序创建游戏。Phaser有对开发职员分外和气的API,并且Phaser的公司也当仁不让付出和保证。近期,在Phaser
3.0本子中透露了好多新的特征和作用。

亚洲必赢官网 36

SweetAlert 2

SweetAlert2
是一个足以创制美好和可响应弹出框的库。SweetAlert2是可观可定制的,100%响应式并且在具有显示器尺寸上都能有很好的显得效果。使用SweetAlert2
你能够创设各个分化的装有惊艳的作风、展现效果和卡通片的弹出框。

亚洲必赢官网 37

Rekit

Rekit是一款可援助您选择React、Redux和React-router成立美好的响应式Web应用程序的工具包。该框架提供了四个用于拍卖框架的无敌区工作具
— 五个名为Rekit
Studio的全职能IDE,以及三个用以在顶峰上中国人民解放军海军事工业程大学业作的增加命令行界面。

亚洲必赢官网 38

Nerd字体

这是二个风靡字体和图标的集纳。它含有叁拾5个补充字种类列,以及来自诸如Font
Awesome、Devicons、Octicons等流行图标集的1300几个图形和图标。全体字体在Linux、macOS和Windows上非常。

亚洲必赢官网 39

Kutt.it

Kutt是多少个免费的能够用来浓缩你的URL、管理链接和装置自定义域的开源库。它有3个简单使用的API,并允许你创造和删除USportageL,以及接纳详细总括新闻跟踪它们。

网站地图xml地图