轻量高效的开源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.mzph.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;观众对延伸于屏幕…