推荐轻量高效无依赖的开源JS插件和库
fchen
8年前
<h2>图片</h2> <ul> <li>baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。 <a href="/misc/goto?guid=4958852894268413209" rel="nofollow,noindex">demo</a></li> <li>Lightgallery.js - 是一个功能齐全的JavaScript图像灯箱插件。 <a href="/misc/goto?guid=4959728699080532758" rel="nofollow,noindex">demo</a></li> <li>viewerjs - 是一个图像预览插件。 <a href="/misc/goto?guid=4959728699177304547" rel="nofollow,noindex">demo</a></li> <li>cropperjs - 是一个图片编辑器插件。 <a href="/misc/goto?guid=4959728699264547497" rel="nofollow,noindex">demo</a></li> <li>photo-editor - 是一个本地图片编辑器插件。 <a href="/misc/goto?guid=4959728699348739881" rel="nofollow,noindex">demo</a></li> <li>blazy.js - 是一个懒惰加载插件。 <a href="/misc/goto?guid=4958853388699116460" rel="nofollow,noindex">demo</a></li> </ul> <h2>布局</h2> <ul> <li>SuperEmbed.js - 是一个Javascript库，可检测出网页上的内嵌视频并使他们能够变成响应式元素。 <a href="/misc/goto?guid=4959728699449969032" rel="nofollow,noindex">demo</a></li> <li>ScrollReveal - ScrollReveal插件使用户能够无比轻松地创建桌面和移动浏览器的网页滚动动画。 <a href="/misc/goto?guid=4958975086885354102" rel="nofollow,noindex">demo</a></li> <li>Bricks.js - 是一款超快的用于固定宽度元素的“砖石”布局生成器。 <a href="/misc/goto?guid=4959666377071756786" rel="nofollow,noindex">demo</a></li> </ul> <h2>轮播图</h2> <ul> <li>Swipe - 准确的触摸滑块。 <a href="/misc/goto?guid=4959728699733508084" rel="nofollow,noindex">demo</a></li> </ul> <h2>弹出层</h2> <ul> <li>Popper.js - 是一个轻量级的库用于管理工具提示和弹窗效果。 <a href="/misc/goto?guid=4959728699805564270" rel="nofollow,noindex">demo</a></li> <li>SweetAlert2 - 是一个颜值很高而且可以自定义的警告弹出窗口插件，可以代替Javascript的弹出窗口。 <a href="/misc/goto?guid=4959728699885810369" rel="nofollow,noindex">demo</a></li> <li>artDialog - 是一个经典、优雅的网页对话框控件。 <a href="/misc/goto?guid=4959719493551558274" rel="nofollow,noindex">demo</a></li> <li>layer - 是一个web弹层组件。 <a href="/misc/goto?guid=4959728699995641222" rel="nofollow,noindex">demo</a></li> </ul> <h2>音频视频</h2> <ul> <li>Loud Links - 是一个轻量级的JavaScript库用于添加交互声音到您的站点。 <a href="/misc/goto?guid=4959728700085065164" rel="nofollow,noindex">demo</a></li> <li>flv.js - B 站 HTML5 播放器内核开源。</li> </ul> <h2>编辑器</h2> <ul> <li>MediumEditor - 仿Medium.com的所见即所得在线编辑器工具栏。 <a href="/misc/goto?guid=4958986646106821809" rel="nofollow,noindex">demo</a></li> <li>Substance - 是一个基于Web的内容自定义编辑器。 <a href="/misc/goto?guid=4959728700191923212" rel="nofollow,noindex">demo</a></li> <li>flatpickr - 是一个轻量级的代码高亮库，适用于任何编程语言。 <a href="/misc/goto?guid=4959728700263917541" rel="nofollow,noindex">demo</a></li> <li>pen - 是一个Markdown编辑器工具。 <a href="/misc/goto?guid=4959627128900905162" rel="nofollow,noindex">demo</a></li> <li>aceAce（Ajax.org Cloud9 Editor）。 <a href="/misc/goto?guid=4959728700386840824" rel="nofollow,noindex">demo</a></li> <li>CodeMirror浏览器端的代码编辑器。 <a href="/misc/goto?guid=4958524506431578114" rel="nofollow,noindex">demo</a></li> <li>esprima用于综合分析的 ECMAScript 解析器。 <a href="/misc/goto?guid=4958986646106821809" rel="nofollow,noindex">demo</a></li> <li>quill一个带有 API 的跨浏览器富文本编辑器。( <a href="/misc/goto?guid=4958834757303185984" rel="nofollow,noindex">demo</a> )</li> <li>ckeditor-releases 适用于每个人的 web 文本编辑器。 <a href="/misc/goto?guid=4958833827474125334" rel="nofollow,noindex">demo</a></li> <li>editor 一个 markdown 编辑器，但仍在开发中。 <a href="/misc/goto?guid=4958536149988610259" rel="nofollow,noindex">demo</a></li> <li>EpicEditor 一个可嵌入的 js Markdown的编辑器，拥有全屏编辑、即时预览、自动保存草稿和离线支持等功能。 <a href="/misc/goto?guid=4959728700586502476" rel="nofollow,noindex">demo</a></li> <li>jsoneditor 查看、编辑和格式化 JSON 的 web 工具。 <a href="/misc/goto?guid=4958828241716262102" rel="nofollow,noindex">demo</a></li> <li>vim.js 拥有持久化 ~/.vimrc 的 Vim 编辑器的 JavaScript 移植版本。 <a href="/misc/goto?guid=4959728700696658151" rel="nofollow,noindex">demo</a></li> <li>Squire HTML5 富文本编辑器。 <a href="/misc/goto?guid=4958859249365090619" rel="nofollow,noindex">demo</a></li> <li>TinyMCE JavaScript 富文本编辑器。 <a href="/misc/goto?guid=4958984614096061122" rel="nofollow,noindex">demo</a></li> <li>trix 由 Basecamp 制作，适用于每天写作的富文本编辑器。 <a href="/misc/goto?guid=4959728700839317726" rel="nofollow,noindex">demo</a></li> </ul> <h2>表单</h2> <ul> <li>validator.js - 轻量级的JavaScript表单验证，字符串验证。 <a href="/misc/goto?guid=4959728700917113927" rel="nofollow,noindex">demo</a></li> <li>List.js - 是一个轻量级的为列表、表格或其他任何HTMLL标签增加了搜索，排序，过滤器和灵活性等元素。 <a href="/misc/goto?guid=4958195799254231695" rel="nofollow,noindex">demo</a></li> <li>Algolia Places - 是一个能让你在网页轻易实现搜索栏自动完成功能。 <a href="/misc/goto?guid=4959728701025804181" rel="nofollow,noindex">demo</a></li> <li>Cleave.js - 是一个会在你输入时格式化你的 <input/> 标签里面的内容。 <a href="/misc/goto?guid=4959728701109771983" rel="nofollow,noindex">demo</a></li> <li>validator.js - 是一个简单、轻量级，但功能强大的 Validator 组件。 <a href="/misc/goto?guid=4959728701193513532" rel="nofollow,noindex">demo</a></li> </ul> <h2>存储</h2> <ul> <li>store.js - 本地存储localstorage的封装，提供简单的API。 <a href="/misc/goto?guid=4959728701261971960" rel="nofollow,noindex">demo</a></li> <li>cookie.js - 对操作cookie的封装，提供简单的AIP 兼容IE6。 <a href="/misc/goto?guid=4959728701346358921" rel="nofollow,noindex">demo</a></li> </ul> <h2>动画</h2> <ul> <li>anime.js - 是一个灵活轻便的JavaScript动画库。 <a href="/misc/goto?guid=4959728701430924694" rel="nofollow,noindex">demo</a></li> <li>three.js - 是一个JS 3D库。 <a href="/misc/goto?guid=4959728701520121530" rel="nofollow,noindex">demo</a></li> <li>vivus - JavaScript库，使SVG绘制动画。 <a href="/misc/goto?guid=4958854416492266618" rel="nofollow,noindex">demo</a></li> </ul> <h2>时间</h2> <ul> <li>moment - 是一个日期处理类库,用于解析、检验、操作、以及显示日期。 <a href="/misc/goto?guid=4959615064105421291" rel="nofollow,noindex">demo</a></li> <li>timesheet.js - 是一个时间展示片段插件。 <a href="/misc/goto?guid=4959728701652675247" rel="nofollow,noindex">demo</a></li> <li>date.js - 是一个格式化时间、过去时间展示、解决因时区变更插件。</li> </ul> <h2>其它</h2> <ul> <li>hotkeys - 是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键。 <a href="/misc/goto?guid=4959643495259665380" rel="nofollow,noindex">demo</a></li> <li>clipboard.js - 现代复制到剪贴板。没有Flash，gzip压缩只有3KB 。 <a href="/misc/goto?guid=4959728701763409154" rel="nofollow,noindex">demo</a></li> <li>translater.js - 这是一个利用HTML注释的页面翻译解决方案。 <a href="/misc/goto?guid=4959728701846320646" rel="nofollow,noindex">demo</a></li> <li>Push.js - 是一个跨浏览器的Javascript桌面通知插件。 <a href="/misc/goto?guid=4959728701919891998" rel="nofollow,noindex">demo</a></li> <li>onlinenetwork - js判断是否断网了。</li> <li>iNotify - 是一个实现浏览器的 title 闪烁、滚动、声音提示、chrome、等系统通知。 <a href="/misc/goto?guid=4959728702007550537" rel="nofollow,noindex">demo</a></li> <li>tesseract.js - 是一个文字识别转换，可以运行在浏览器和服务器NodeJS上。 <a href="/misc/goto?guid=4959728702083083967" rel="nofollow,noindex">demo</a></li> </ul> <h2>CDN</h2> <ul> <li><a href="/misc/goto?guid=4959728702159113601" rel="nofollow,noindex">https://cdnjs.com</a></li> <li><a href="/misc/goto?guid=4959728702244973561" rel="nofollow,noindex">http://cdnjs.net</a></li> <li><a href="/misc/goto?guid=4959728702332208425" rel="nofollow,noindex">http://www.jsdelivr.com</a></li> <li><a href="/misc/goto?guid=4959728702417977304" rel="nofollow,noindex">http://unpkg.com</a></li> <li><a href="/misc/goto?guid=4959728702486557134" rel="nofollow,noindex">http://rawgit.com</a></li> <li><a href="/misc/goto?guid=4959728702575176156" rel="nofollow,noindex">http://staticfile.org</a></li> <li><a href="/misc/goto?guid=4959728702660922342" rel="nofollow,noindex">http://www.bootcdn.cn</a></li> <li><a href="/misc/goto?guid=4959728702731077321" rel="nofollow,noindex">http://cdn.baomitu.com</a></li> <li><a href="/misc/goto?guid=4959728702815183408" rel="nofollow,noindex">http://lib.sinaapp.com</a></li> <li><a href="/misc/goto?guid=4959728702901587561" rel="nofollow,noindex">http://cdn.code.baidu.com</a></li> <li><a href="/misc/goto?guid=4959728702980842028" rel="nofollow,noindex">http://jscdn.upai.com</a></li> <li><a href="/misc/goto?guid=4959728703058835365" rel="nofollow,noindex">https://www.asp.net/ajax/cdn</a></li> <li><a href="/misc/goto?guid=4959728703133719402" rel="nofollow,noindex">http://libs.sun0769.com</a></li> <li><a href="/misc/goto?guid=4959728703217867359" rel="nofollow,noindex">https://css.net</a></li> <li><a href="/misc/goto?guid=4958824072057720084" rel="nofollow,noindex">https://developers.google.com/speed/libraries/</a></li> </ul> <p> </p> <p>来自：https://github.com/jaywcjlove/handbook/blob/master/Javascript/轻量高效的开源JavaScript插件和库.md</p> <p> </p>