动图展示 60+ 个常用的前端插件库

- 日理万妓 2022-10-12 01:48 333阅读 0赞

![d65e111c275f7e72b231326562204d16.png][]

作者：寒青

https://segmentfault.com/a/1190000019151460

## `DataTables` ##

官网：https://www.datatables.net/

DataTables是jQuery的JavaScript函数库，目的是强化表格操作（如搜索、排序），并自动加入组件引入表格中，使用非常灵活简便。

![a3d5b17f93edcbea2700b87f0a3850db.gif][]

## `LazyLoad` ##

官网：Lazy Load  
延伸：Vanilla JavaScript Lazy Load Plugin

Lazy Load帮助高度较长的网页进行延迟载入图片，尚未浏览到该部分时，不会载入视角外的图片，提高效率。

![1934a5e3aff7ed8d877049977de52c37.gif][]

## `lightSlider` ##

官网：JQuery lightSlider  
Github：sachinchoolur/lightslider

JQuery lightSlider是一个轻量且响应式的跑马灯/幻灯片，附有缩图导览。另外还有相本功能、垂直跑马灯，应用层面广泛。

![325f4818d65a2d0a79b18fb251ad28b9.gif][]

## `alertify.js` ##

官网：https://fabien-d.github.io/alertify.js/  
Github：alertify.js

alertify.js是为了美化通知信息而生的JavaScript框架。

![45dfa01864aaaf730a01cbe51e4bad38.gif][]

## `pickadate.js`\-日期/时间选择器 ##

官网：pickadate.js

![206fe8c39d734c5195fe2ed2ed5d5783.gif][]

## `chosen` ##

官网：Chosen  
Github：chosen

Chosen是一个jQuery的插件，目的是让又长又笨重的下拉式选单变得更友善。

![82a2e87b2e77491471bdd9c1ef83596c.gif][]

## `typeahead.js` ##

Github：typeahead.js

由Twitter推出，灵活扎实的建议列表函数库。

![56c8f9ac173da4676817d972b87a3c8b.gif][]

## `textillate.js` ##

官网：textillate.js  
Github：jschr/textillate

textillate.js结合了很多很棒的函数库，简单应用CSS3动画特效。

![3319f7b3388999e3874644bf01a26467.gif][]

## `Chart.js` ##

官网：Chart.js

对设计师或开发人员，浅显易懂的JavaScript图标应用。

![cb5203c88cd5c17a1a692894fe839c90.png][]

## `highlight.js` ##

官网：highlight.js  
Github：highlight.js

针对Web程序所做的高亮显示上色。

![464dc524cf17000550964efcd49deb81.png][]

## `jquery-loading` ##

官网：jquery-loading

起源于为了在读取或运行中，锁住特定对象，并同时保持让浏览者可以操作页面的其他部分。

![b660ade7fe3ff2aafe8835751b1ad06d.gif][]

## `jquery-validation` ##

官网：jQuery Validation  
Github：jquery-validation

jQuery Validation插件让用户端检查表单变得更容易，并提供大量的定制化设定，无论导入新开发或是现有的项目都是很好的选择。

![8aa39fc25f1740198a13b295c06c5859.gif][]

## `Moment.js` ##

官网：Moment.js

轻量级专门解析、验证、操作、格式化日期的JavaScript函数库，Moment.js是为浏览器和Node.js而设计，所有组件都可以在这两个环境下运行。

## `Animate.css` ##

官网：Animate.css

纯CSS，无需JavaScript，支持多浏览器的动画特效，即插即用。

![248da5653df6b9232f21b44c59bfc9e3.gif][]

## `Ace` ##

官网：Ace

Ace是透过JavaScript所开发的线上程序语言编辑器插件，无论功能和性能都类似一般编辑器（Sublime、Vim和TextMate等），导入进任何网页或JavaScript应用程序都相当容易。值得一提的是Ace是由Cloud9 IDE的团队维护，并且是Mozilla Skywriter（Bespin）项目的延伸品，品质值得信赖。

![2cba995328c700262568467546fc6ce2.gif][]

## `PDF.js.js` ##

官网：PDF.js

PDF.js是一个由HTML构建的PDF阅读器，由Mozilla Labs所推广，目标是建立一个通用的PDF平台。

![e38e8d2d8135e4e3084a60acf4babf14.gif][]

## `reveal.js`\-网页变简报 ##

官网：REVEAL.JS

![a8f55734db164c633f75ef6df3443edf.gif][]

## `Intro.js`\-网站导航 ##

官网：Intro.js

优化网站的导航功能，提供步骤指南给浏览者，强化网站的用户体验。

![8c3f6a5e324ee4b9b1409980f1898a04.gif][]

## `Fine Uploader`\-拖拽上传 ##

官网：fine-uploader  
Github：fine-uploader

导入拖拽上传档案，跨浏览器、原生JavaScript又加上免费开源，只要载入JavaScript就可以开始运行，不依赖其他程序。

![be7166cf4a03a6de814052ced46c586f.gif][]

## `parallax.js` ##

官网：parallax.js  
Github：wagerfield/parallax

对任何设备，兼容性高的视差引擎。

![2ed3418680ecf6ed0b05dd8e9930225e.gif][]

## `Hover.css` ##

官网：Hover.css  
Github：IanLunn/Hover

多项针对链接、按钮、Logo、SVG和图片的移入CSS3特效。

![86ed019f603e655b90c06f16d8241837.gif][]

## `iscroll` ##

Github：cubiq/iscroll

iScroll是一款高性能、文件小、无依赖且多平台的JavaScript拖拽滑动库。

![1c81e5b4d30f45e0327b628f11c33106.gif][]

## `Toolbar.js` ##

官网：Toolbar.Js  
Github：paulkinzett/toolbar

一个产生工具列的jQuery插件。

![45fddd21da02aa979855ceec92f5172d.gif][]

## `nanoScroller.js` ##

Github：nanoScrollerJS

nanoScroller.js是一个用简单方法做出类似Mac OS X风格卷轴的jQuery插件，尽管目前没有在持续维护，但使用上相当简单且支持度高仍然是不错的选择。

![bd1b87391a8501e794e7db951478651c.gif][]

## `iCheck` ##

官网：iCheck  
Github：icheck

专为jQuery和Zepto做的高弹性定制化`checkbox`和`radio`按钮的插件。

![f08d9693103fed0ceb79702f4e95f05c.gif][]

## `KUTE.js` ##

官网：KUTE.js  
Github：kute.js

一个成熟的原生的JavaScript动画引擎，提供给网站开发者、设计师、动画师相当多基本的功能，浅显易懂的操作方式，跨浏览器动画，拥有着高质量、灵活、专业且轻量（主要核心只需要17K）。

![f96be531324c0785dbfd6b4046db84d6.gif][]

## `Timeline.js` ##

官网：Timeline.js

jQuery时间轴插件，使用简单是它的优点。

![56ed4edbff4f9007ee4e300914e05c7c.gif][]

## `Muuri.js` ##

官网：Muuri

Muuri是一个JavaScript Layout引擎，让你可以构建多样化的Layout，并具有响应式、可排序、可过滤、拖拽移动或动画效果。

![021e6bdc78aa0da9699bfb0bb66be790.gif][]

## `Algolia Places` ##

官网：Algolia Places

Algolia Places为您的网站提供一个快速、简单的方式，自动化产生地址建议列表的JavaScript函数库。

## `lightgallery.js` ##

官网：lightgallery.js  
Github：lightGallery

一个弹性高、组件化且响应式的灯箱jQuery插件。

![5b73bfbbdd87b37f92589ce22235c5bd.gif][]

## `Tabslet` ##

官网：Tabslet  
Github：Tabslet

一个用于页签的jQuery插件，轻量级且操作容易。

![27199f57e029be661ec9adc39c227771.gif][]

## `Masonry.js` ##

官网：Masonry

Masonry常用于瀑布流布局的插件。

![44829a4f59152750777ce2c4eb64f2a8.gif][]

## `Slidebars` ##

官网：Slidebars  
Github：Slidebars

Slidebars是一个jQuery框架，提供网站或网站应用程序侧边栏选单。

## `three.js` ##

官网：three.js  
Github：three.js

易于使用且轻量级3D函数库，提供`canvas`、`SVG`、`CSS3 3D`和`WebGL`渲染器。

![7e3a00cd4cfb0ecc5add3b928fd2c37c.gif][]

## `Videos.js`\-HTML5视频播放器 ##

官网：Video.js: The Player Framework  
Github：video.js

Video.js是随着HTML5的来袭所打造的媒体播放器，支持HTML5和Flash视频，支持PC和移动设备。这个项目从2010年开始，现在已经有超过40万的网站使用它。

![860551b29f7f0e4354b6c9105976b260.gif][]

## `Leaflet.js` ##

官网：Leaflet  
Github：Leaflet

Leaflet是一个对移动设备友善的互动地图并且开源的JavaScript函数库，总大小只有38KB，却有着大多数开发人员想要的需要。简单、专业、实用并且跨平台可以有效率地在PC和移动设备上，并且有大量的插件可以扩展，有着华丽却简单使用的API，很易学且阅读性高的源码。

![aee2d131c82273ba9e1ceb063f5d6d1e.gif][]

## `Sortable` ##

官网：SortableJS

Sortable可以对HTML对象做拖拽移动清单的JavaScript函数库，支持移动设备且不依赖jQuery等其他第三方，并兼容Bootstrap等CSS框架。

![65c3f82607e469eab9a286bdc7984566.gif][]

## `clipboard.js` ##

官网：clipboard.js  
Github：clipboard.js

复制内容到剪切板的小工具，不依赖Flash，大小只要3KB。

## `howler.js` ##

官网：howler.js

howler.js是针对当下网站的一个音频播放函数库，预设为Web Audio API和HTML5 Audio，可以透过JavaScript播放声音变得更简单，并且跨平台。

## `p5.js`\-绘画插件 ##

官网：p5.js  
Github：processing/p5.js

p5.js是一个JavaScript函数库，有完整的绘画功能，并不局限在画布上，你可以把整个浏览器当做你的草稿，另外有插件可以让你更容易去做HTML5互动，加入文字栏、影片、视频或音频等功能。

![de71e40ef46d51fcf8b02314be528eb2.gif][]

## `fullPage.js`\-全页式导航 ##

官网：fullPage.js  
Github：fullPage.js

![044e2333ecda9efb732d4bf266604bf2.gif][]

## `store.js` ##

Github：store.js

针对任何项目都可以做的跨浏览器的数据存取，全站都可以运行，浏览器支持度高，小项目不想导入大型框架的不错选择。

![8d62ee5536a2c5e2ab95d3e134fe0c87.gif][]

## `fullcalendar` ##

官网：JavaScript Calendar  
Github：fullcalendar

设计一个满版且可拖拽事件的行程日历。Bootstrap的排版风格，可读入JSON格式数据，安装容易、支持响应式排版。

![1957e3d5ed79974ea6caf22a8b89494b.gif][]

## `Headroom.js` ##

官网：Headroom.js

把网站空间发挥到极限，不需要导航列表是隐藏，需要时出现。搭配Animation.css可以让画面更活泼，另外也支持jQuery或Angular。

![feb1b6c406ee9ffabfa2b6a7685c6fb0.gif][]

## `ScrollToFixed` ##

官网：ScrollToFixed

ScrollToFixed能够让网页的导航或表头等固定在顶部或底部，用户更方便的操作或查看信息。除了导航和表头，也可以固定其他内容，比如广告、返回顶部等。

![275c1f97524abb82b2a76b8a35957dfc.gif][]

## `Handlebars.js` ##

官网：Handlebars.js  
Github：handlebars.js

Handlebars主要是让你在做语义化模板时更有效率、且不容易受挫，并且兼容Mustache模板，大多数可以直接互换使用。

## `faker.js` ##

Github：faker.js

faker.js可以在浏览器或Node.js产生大量的假数据。测试时期相当方便的东西，也可以透过Google Extension来运行。

## `TinyMCE`\-HTML编辑器 ##

官网：TinyMCE  
Github：tinymce

TinyMCE是功能齐全且轻量级的HTML编辑器，但需要在IE11以上才可以运行。

![418959a3868fb4b59bf7a5b39406b7e5.gif][]

## `List.js`\-资料排序 ##

官网：List.js  
Github：list.js

List.js对表格、清单、各式各样的对象，增加搜索、排序、过滤和灵活性，无形地建立在HTML内，极简易也易于使用。即便周边不如DataTables，但不依赖jQuery及大小仅Datatables的1/4（压缩后17KB），以及对IE的高兼容性和不止对`<table>`，对`<ul>`、`<ol>`或是其他HTML元素的支持，都是`List.js`不容忽视的优势之一。

![146e87e8d80873dc5cf5d2ffd6a6f6cf.gif][]

## `Swiper` ##

官网：Swiper  
Github：Swiper

Swiper是当下王铮的幻灯片/跑马灯插件，使用效能高，并可运用在移动设备上及混合式App上，不但在最新版本的IOS上运行良好，在Android、Windows Phone 8和PC设备上一样表现优秀。要注意的是，Swiper并不兼容所有平台设备，而是专注于当下主流平台设备的兼容性和效能上。同时Swiper也是Framework7和Ionic Framework的组件的一部分。

![944111c7f87130a9da8784a717cf159e.gif][]

## `toastr` ##

官网：Toastr

toastr是一个提示信息JavaScript函数库，必须载入jQuery，宗旨是利用简单的程序函数库来做定制化跟扩展。toastr提供一个范例页面toastr examples，方便自订效果跟产生源码，类似Customize and download · Bootstrap的效果，方便使用者加快流程，先前介绍的ALERTIFY JS整体层面比toastr好很多，无论原生JavaScript以及整体文件大小和功能延展性，但toastr简单使用的操作模式，如果有旧项目是在jQuery的环境下，要做一些定制化功能，或许就是不错的选择。

![502f97a2675a3ff39e7903847973e745.gif][]

## `goodshare.js`\-极简动画绘制 ##

官网：Sketch.js

![86a393ff1e9c9d806c04c17f79f45597.gif][]

## `Quill` ##

官网：Quill  
Github：Quill

Quill是当下高兼容性、强大、丰富且具有扩展性的文字编辑器。对于移动设备的支持度高。

![69f5d463ac29de1142231c0441f0401a.gif][]

## `Shave`\-截断文字 ##

官网：Shave

Shave根据内容的最大高度将文字截断，是一个没有任何依赖性的JavaScript插件。并将多出的文字藏在`span`后面，保留原文的完整性。CSS本身通过`text-overflow`也有类似的功能（Truncate String with Ellipsis），但需要设定宽度，如果需要不能固定宽度的项目，Shave应该是一个不错的选择。

## `Tabulator` ##

官网：Tabulator

Tabulator是相当容易操作的表格内容产生器，只需要花很少的时间就可以通过把数组或JSON格式的资料生成HTML界面的表格。并且支持响应式网页，以及运用其他插件做成对象产生资料图表。

![e414f9775f52ca8a4d32f6fb99906b5b.gif][]

## `ScrollReveal`\-动态显示内容 ##

官网：ScrollReveal

![c92e7fc28a81c10f3f5d506c78b9c0ba.gif][]

## `datedropper` ##

官网：datedropper  
Github：datedropper

datedropper是微型但功能强大的jQuery时间选择器。内建风格相当活泼可爱，可增加网站的活力。

![363ad40f4cc280cf1e51d1e0b9b9c885.gif][]

## `Cleave.js`\-表单栏位格式化工具 ##

官网：Cleave.js

![827e3ec00ecd8df319cd3bb4eae4b894.gif][]

## `Infinite Scroll` ##

官网：Infinite Scroll

Infinite Scroll是jQuery一个用来实现无限滚动的插件。

![c648e5e607af07ff39d9cc125c834b32.gif][]

[d65e111c275f7e72b231326562204d16.png]: /images/20221005/28a5798eb0364ee48674e08512ac93fb.png
[a3d5b17f93edcbea2700b87f0a3850db.gif]: /images/20221005/85fc7571e7164d8b9d58b2852412e2ab.png
[1934a5e3aff7ed8d877049977de52c37.gif]: /images/20221005/d74373300c864cedaaca2f07f3d7800d.png
[325f4818d65a2d0a79b18fb251ad28b9.gif]: /images/20221005/750f3ab8a58b4a5a9061102bd9b1d395.png
[45dfa01864aaaf730a01cbe51e4bad38.gif]: /images/20221005/00b7de66630249ea93ee344cd27817a0.png
[206fe8c39d734c5195fe2ed2ed5d5783.gif]: /images/20221005/53d8160b3e934476abea7e29a2273026.png
[82a2e87b2e77491471bdd9c1ef83596c.gif]: /images/20221005/4f1f2d5230d5440895c5b3e9a1e07843.png
[56c8f9ac173da4676817d972b87a3c8b.gif]: /images/20221005/cd0191772c4b421c8560dc0a33e35298.png
[3319f7b3388999e3874644bf01a26467.gif]: /images/20221005/df264ca3ee0c4621801423a7ef88d709.png
[cb5203c88cd5c17a1a692894fe839c90.png]: /images/20221005/b7cdd1f1c7214c2ebb756fa3396ca315.png
[464dc524cf17000550964efcd49deb81.png]: /images/20221005/e0ffd255cf714da69eb9ee6f80d64241.png
[b660ade7fe3ff2aafe8835751b1ad06d.gif]: /images/20221005/601754711bd545338f292fd5f84bbc39.png
[8aa39fc25f1740198a13b295c06c5859.gif]: /images/20221005/44e9e1d8aac7454cba8642ea4a6a04da.png
[248da5653df6b9232f21b44c59bfc9e3.gif]: /images/20221005/0fb79d8991f9451cad2334707999cb8b.png
[2cba995328c700262568467546fc6ce2.gif]: /images/20221005/bb1fde47145643dbb127010aa1e1942b.png
[e38e8d2d8135e4e3084a60acf4babf14.gif]: /images/20221005/e743e6ba5f514efd9a43ddcc29e63ee6.png
[a8f55734db164c633f75ef6df3443edf.gif]: /images/20221005/d448dc18c423471bbf9b419d022f3d87.png
[8c3f6a5e324ee4b9b1409980f1898a04.gif]: /images/20221005/8253dcba483c41948b10395a3197f3ad.png
[be7166cf4a03a6de814052ced46c586f.gif]: /images/20221005/0b528fda257b42a196849b0ec628c167.png
[2ed3418680ecf6ed0b05dd8e9930225e.gif]: /images/20221005/1ac3bf922cd4422d9bb03aa5635d10a4.png
[86ed019f603e655b90c06f16d8241837.gif]: /images/20221005/faee0b097c3d47608059a2b58f843446.png
[1c81e5b4d30f45e0327b628f11c33106.gif]: /images/20221005/9f429d81f6d742259d88d6296933bc7f.png
[45fddd21da02aa979855ceec92f5172d.gif]: /images/20221005/8532dfa4a53e4e49966967176a934bf4.png
[bd1b87391a8501e794e7db951478651c.gif]: /images/20221005/878b682e08a64f6887a5dada70745a34.png
[f08d9693103fed0ceb79702f4e95f05c.gif]: /images/20221005/18436060182044c4902f69bfd78f5859.png
[f96be531324c0785dbfd6b4046db84d6.gif]: /images/20221005/33b3f70c489149b39668632576e2686d.png
[56ed4edbff4f9007ee4e300914e05c7c.gif]: /images/20221005/f2a19a5cb4624a1b9786b1de251be7b4.png
[021e6bdc78aa0da9699bfb0bb66be790.gif]: /images/20221005/1229bed9551b437dbe48f89306d9be26.png
[5b73bfbbdd87b37f92589ce22235c5bd.gif]: /images/20221005/d550701bca81413f9ac4c025ad21c167.png
[27199f57e029be661ec9adc39c227771.gif]: /images/20221005/bf44915849ad48f792e3ce2204939f32.png
[44829a4f59152750777ce2c4eb64f2a8.gif]: /images/20221005/25d3e7ca37c84ac8b092b11602c21b7b.png
[7e3a00cd4cfb0ecc5add3b928fd2c37c.gif]: /images/20221005/3dc8fd3057f740f3a63be1ac99f6aa3c.png
[860551b29f7f0e4354b6c9105976b260.gif]: /images/20221005/7e84ffb8026843f5a5d82d64258b4bd6.png
[aee2d131c82273ba9e1ceb063f5d6d1e.gif]: /images/20221005/8ecbd9e9ef15441a91b35c9d5a6077fe.png
[65c3f82607e469eab9a286bdc7984566.gif]: /images/20221005/32625f53762648e2bc4c69aa56c09984.png
[de71e40ef46d51fcf8b02314be528eb2.gif]: /images/20221005/f5b304a6d7154d758f1442b72d3a3d3d.png
[044e2333ecda9efb732d4bf266604bf2.gif]: /images/20221005/afd4497b1cd548e4a5baa32cb18e138f.png
[8d62ee5536a2c5e2ab95d3e134fe0c87.gif]: /images/20221005/1da8f1a68fb2461aa1b16aadc6e26220.png
[1957e3d5ed79974ea6caf22a8b89494b.gif]: /images/20221005/1f9b16edec91480e86822b17ff65f758.png
[feb1b6c406ee9ffabfa2b6a7685c6fb0.gif]: /images/20221005/daacc290704c41dd972cca1520f70baa.png
[275c1f97524abb82b2a76b8a35957dfc.gif]: /images/20221005/2dc2a02533d04b6e94c4b1dd06aa0bc1.png
[418959a3868fb4b59bf7a5b39406b7e5.gif]: /images/20221005/9c69b517cb5b46b7b526482e3da8bb59.png
[146e87e8d80873dc5cf5d2ffd6a6f6cf.gif]: /images/20221005/1e825955a88647b3a596514ffb0f2cdf.png
[944111c7f87130a9da8784a717cf159e.gif]: /images/20221005/16cbe59ead4744bc8c9479a0278e9661.png
[502f97a2675a3ff39e7903847973e745.gif]: /images/20221005/1f3323a0f8a8468e8ab19a600f273e84.png
[86a393ff1e9c9d806c04c17f79f45597.gif]: /images/20221005/8a78b953c9374250861760442ef84487.png
[69f5d463ac29de1142231c0441f0401a.gif]: /images/20221005/d87e9872b3904095b3457d81d6a25fd5.png
[e414f9775f52ca8a4d32f6fb99906b5b.gif]: /images/20221005/34b1ba9a10404ed0b42df7ce976dc388.png
[c92e7fc28a81c10f3f5d506c78b9c0ba.gif]: /images/20221005/4947fdbc3f494d7fb88979c20c9da812.png
[363ad40f4cc280cf1e51d1e0b9b9c885.gif]: /images/20221005/5b139b69e4c8438da4edfbc7b1c862ae.png
[827e3ec00ecd8df319cd3bb4eae4b894.gif]: /images/20221005/e813b533d66448b0bc223fcbb9f79609.png
[c648e5e607af07ff39d9cc125c834b32.gif]: /images/20221005/c58cfccd5367403295bd65f963116dc8.png