十一、有用的JavaScript工具

最后更新于:2022-04-01 06:28:03

### 44. [epicGrid](https://github.com/Paul-Browne/epicGrid) 创建栅格系统的轻量级、响应式纯JavaScript库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ed0b8f6.jpg) ### 45. [gridstack.js](http://troolee.github.io/gridstack.js/) jQuery布局插件 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ed1fcf8.png) ### 46. [Roll](https://github.com/williamngan/roll) 帮助你跟踪位置、滚动、和分页的JS库 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ed2de30.png) ### 47. [Rune.js](http://runemadsen.github.io/rune.js/) 使用SVG实现的编程图像绘制系统JS库 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ed3ec24.png) ### 48. [clipboard.js](http://zenorocha.github.io/clipboard.js/) 拷贝文字到剪切板的现代化方法 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ed5082c.jpg) ### 49. [Challenger.js](http://rileyjshaw.com/challenger/) 在任何页面弹出交互式编程挑战的插入式JS库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ed5e4f9.png) ### 50. [html5tooltips.js](http://ytiurin.github.io/html5tooltipsjs/) 带有CSS3动画的轻量级简洁Tooltip插件 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ed6c404.png) ### 51. [egg.js](https://github.com/mikeflynn/egg.js) 向网页上添加复活节彩蛋的简单JavaScript库 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ed7b4f9.jpg) ### 52. [Annotator.js](https://github.com/dvnc/annotator) 为页面中选中的文本添加注释、高亮、标签等的JS库 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ed8b63d.png) ### 53. [Svidget.js](http://www.svidget.com/) 创建梦幻般小部件的JavaScript框架 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ed9c1eb.jpg) ### 54. [Vorlon.js](http://vorlonjs.com/) 开源、可扩展、与平台无关、用于远程调试和测试JS的库 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107edb1fc5.png) ### 55. [Space.js](http://www.slashie.org/space.js/) HTML驱动的3D滚动JavaScript库 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107edc0b74.png) ### 56. [JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/) JavaScript中关于 quirkier 部分的文档集合。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107edd1d30.jpg)
';

十、动画插件&库

最后更新于:2022-04-01 06:28:01

### 35. [iconate.js](http://bitshadow.github.io/iconate/) 体积小、性能高的跨浏览器图表转换库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ec544a9.jpg) ### 36. [Animate-Plus](https://github.com/bendc/animateplus) 帮你设置CSS及SVG动画属性的高性能JavaScript库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ec60951.jpg) ### 37. [Dynamics.js](http://dynamicsjs.com/) 用于创建基于物理学的CSS动画的JavaScript库 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ec715b4.png) ### 38. [mo · js](http://mojs.io/) The ‘Motion Graphics Toolbelt’ for the web. ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ec7d7b5.jpg) ### 39. [cta.js](http://kushagragour.in/lab/ctajs/) 轻量级“行动到效果”动画库 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ec8d2aa.png) ### 40. [jQuery.smoothState.js](http://smoothstate.com/) 不显眼的页面过渡jQuery插件 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ec9a09b.jpg) ### 41. [ramjet.js](http://www.rich-harris.co.uk/ramjet/) 实现DOM元素从一个状态到另一个状态平稳过渡的库 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ecaad17.jpg) ### 42. [Animsition](http://git.blivesta.com/animsition/) 用于CSS页面过渡的简单jQuery插件 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ecb8a69.jpg) ### 43. [vivus.js](http://maxwellito.github.io/vivus/) 允许你为SVG添加动画的jQuery库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ecc7b4b.jpg)
';

九、辅助工具

最后更新于:2022-04-01 06:27:58

### 32. [tota11y](http://khan.github.io/tota11y/) 一个可视化工具箱。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ec18b10.jpg) ### 33. [ally.js](http://allyjs.io/) 使访问更简单的JavaScript库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107eb3c0b4.png) ### 34. [emojify.js](http://hassankhan.me/emojify.js/) 把Emoji关键词转换为表情图的JavaScript模块。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ec29414.png)
';

八、表单插件

最后更新于:2022-04-01 06:27:56

### 25. [Awesomplete](http://leaverou.github.io/awesomplete/) 超轻量级、高度可定制化的自动补全jQuery插件。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107eb87da4.jpg) ### 26. [Submitter](http://fengyuanchen.github.io/submitter/) 简单的jQuery表单提交插件。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107eb9af0f.png) ### 27. [Select or Die](http://vst.mn/selectordie/) 为元素设置样式的jQuery插件。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107eba9596.jpg) ### 28. [jQuery Nice Select](http://hernansartorio.com/jquery-nice-select/) 把原生样式替换为可定制的下拉菜单的轻量级jQuery插件。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ebbcbed.png) ### 29. [datedropper](http://felicegattuso.com/projects/datedropper/) 提供管理日期输入字段的jQuery插件。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ebc9300.jpg) ### 30. [Instantsearch.js](https://community.algolia.com/instantsearch.js/) 用于高性能即时搜索的插件。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ebdb95c.jpg) ### 31. [notie.js](https://jaredreich.com/projects/notie.js/) 清洁、简单的通知插件。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ebe9fe4.jpg)
';

七、延迟加载

最后更新于:2022-04-01 06:27:54

### 23. [Layzr.js](http://callmecavs.github.io/layzr.js/) 体积小、速度快、现代化、无依赖的延迟加载库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107eb3c0b4.png) ### 24. [AntiModerate](https://github.com/whackashoe/antimoderate) 渐进图片加载库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107eb50ef6.jpg)
';

六、图片编辑

最后更新于:2022-04-01 06:27:51

### 20. [PixelFlow](http://devnimlos.com/professional/pixelflow) 使用jQuery画布实现的图片模糊过滤器。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107eaf3912.png) ### 21. [Smartcrop.js](https://github.com/jwagner/smartcrop.js) 内容感知的图像裁剪库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107eb0da16.jpg) ### 22. [Image Blur Plugin](http://msurguy.github.io/background-blur/) 超级轻量级的跨浏览器jQuery图像模糊库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107eb1c641.png)
';

五、响应式图片解决方案

最后更新于:2022-04-01 06:27:49

### 18. [Rimg](http://joeyvandijk.github.io/rimg/) 纯JS的响应式图片解决方案,适用于支持媒体查询的浏览器。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107eabb2b8.jpg) ### 19. [ResponsifyJS](http://responsifyjs.space/) 使图片真正响应式的jQuery库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107eacdb00.jpg)
';

四、JavaScript排版

最后更新于:2022-04-01 06:27:47

### 13. [Plumin.js](http://www.pluminjs.com/) 使用JavaScript创建和操纵字体。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ea55145.jpg) ### 14. [Unicoder.js](http://tholman.com/unicoder.js/) 把文本转化成带有艺术效果的Unicode字符的JS库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ea6684e.jpg) ### 15. [underline.js](http://wentin.github.io/underlineJS/) 为文字绘制了完美、俏皮的、带有动画效果的下划线的JS库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ea7beac.jpg) ### 16. [Readable](http://mds.sh/readable/) 创建可读段落的jQuery插件。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ea8ec72.png) ### 17. [substituteteacher.js](http://danrschlosser.github.io/substituteteacher.js/) 让句子互相替换的JS库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ea9ed88.png)
';

三、轮播图&画廊

最后更新于:2022-04-01 06:27:44

### 8. [ItemSlide.js](http://itemslide.github.io/) 同时支持触摸滑动以及鼠标滚动的JavaScript轮播图库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107e9e0dff.png) ### 9. [lory.js](http://meandmax.github.io/lory/) 使用vanilla JavaScript编写的简单的触摸式滑块工具。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107e9ef115.png) ### 10. [Simple Lightbox](http://andreknieriem.de/simple-lightbox/) 同时支持移动端和PC端的jQuery灯箱效果插件。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ea0a1e7.jpg) ### 11. [Chocolat.js](http://chocolat.insipi.de/) 响应式jQuery灯箱插件。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ea1c041.jpg) ### 12. [jQuery lightgallery](http://sachinchoolur.github.io/lightGallery/) 轻量级、可定制、模块化、响应式的灯箱画廊插件。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107ea2e629.jpg)
';

二、导航

最后更新于:2022-04-01 06:27:42

### 4. [Elevator.js](http://tholman.com/elevator.js/) “返回顶部”效果像真正的电梯一样。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107e974c2d.png) ### 5. [Slideout.js](https://mango.github.io/slideout/) 适用于移动端WEB应用的触摸式导航菜单。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107e990e20.jpg) ### 6. [Hammer.js](http://hammerjs.github.io/) JavaScript 多点触控手势库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107e9a2570.png) ### 7. [Responsible.js](http://davidwells.io/code/responsible/) 让移动端用户自由选择使用桌面端布局还是移动端布局。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107e9add58.png)
';

一、图形与图表

最后更新于:2022-04-01 06:27:40

### 1. [Clusterize.js](http://nexts.github.io/Clusterize.js/) 可以轻松显示大数据集的微型JavaScript插件。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107e9236db.png) ### 2. [plotly.js](https://plot.ly/javascript/) 高级、开源的图表库。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107e9374d0.jpg) ### 3. [Textures.js](http://riccardoscalco.github.io/textures/) 使用SVG元素实现数据可视化。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107e94a30e.jpg)
';

前言

最后更新于:2022-04-01 06:27:38

> 原文:[speckyboy.com](http://speckyboy.com/2015/12/13/javascript-resources-2015/),由 [Specs](http://9iphp.com/) 翻译整理,发布在 [Coder资源网](http://info.9iphp.com/) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-12-28_568107e906b2b.jpg) 首先在这个合集中,你可能会注意到,jQuery插件的数量相对去年来说有些减少,相反,我们更多看到的是使用原生JavaScript而不需要依赖jQuery的一些更小、更轻量级的独立JavaScript库。 我们现在需要的是更有针对性的解决方案,而不是需要一个复杂的框架,却只使用其中的一两个函数。 所有资源分为以下几个部分:图形与图表、导航、轮播图&画廊、JavaScript排版、响应式图片解决方案、图片编辑、延迟加载、表单插件、辅助工具、动画插件&库、以及最后列出的一些有用的JavaScript工具。
';