67 个JavaScript和CSS实用工具、库与资源
optp9065
7年前
<p><img src="https://simg.open-open.com/show/6f41022885057007eee0c50320dfed95.jpg"></p> <p>在这篇文章中，我不会与大家谈论大型的前端框架，如 React、Angular、Vue 等，也没有涉及那些流行的代码编辑器，如 Atom、VS Code、Sublime，我只想与大家分享一个有助于提升开发人员效率的工具列表合集。</p> <p>或许，一些朋友已经对文中的一些工具有所了解，但如果你发现了一些对你有帮助的新工具，那么，我将倍感欣慰。</p> <p>由于这个列表中包含了不同类别的资源，为了便于大家查看，我已将其进行了重新的分类，来 Enjoy 吧！</p> <h2>JavaScript 库</h2> <ul> <li><a href="/misc/goto?guid=4958856221865922919">Particles.js</a> - 一个用于在网页上创建漂亮的浮动粒子的 JS 库；</li> <li><a href="/misc/goto?guid=4959728701520121530">Three.js</a> - 用于在网页上创建 3D 物体与空间的 JS 库；</li> <li><a href="/misc/goto?guid=4959754545244412198">Fullpage.js</a> - 易于实现全屏滚动功能的库；</li> <li><a href="/misc/goto?guid=4959754545323294882">Typed.js</a> - 实现打字机效果；</li> <li><a href="/misc/goto?guid=4959754545409816597">Waypoints.js</a> - 滚动到元素触发事件的库；</li> <li><a href="/misc/goto?guid=4959627241162101896">Highlight.js</a> - 页面上语法高亮显示；</li> <li><a href="/misc/goto?guid=4958535749191364478">Chart.js</a> - 纯 JS 制作漂亮的图表；</li> <li><a href="/misc/goto?guid=4958826271417413261">Instantclick</a> - 鼠标悬停预先加载页面资源，大大加速你的网站响应速度；</li> <li><a href="/misc/goto?guid=4959622923025671299">Chartist</a> - 开源响应式图表库；</li> <li><a href="/misc/goto?guid=4959754545603783886">Motio</a> - 基于 sprite 的动画和平移库；</li> <li><a href="/misc/goto?guid=4958847335485646981">Animstion</a> - 页面切换动画的 jQuery 插件；</li> <li><a href="/misc/goto?guid=4959754545707912160">Barba.js</a> - 创建页面间流畅平滑的过渡效果；</li> <li><a href="/misc/goto?guid=4958537862665070200">TwentyTwenty</a> - jQuery 视差插件；</li> <li><a href="/misc/goto?guid=4959754545823262651">Vivus.js</a> - 可以执行 SVG 路径动画的轻量级 JS 库；</li> <li><a href="/misc/goto?guid=4958826167844090534">Wow.js</a> - 页面滚动时展现动画效果；</li> <li><a href="/misc/goto?guid=4958859164442566364">Scrolline.js</a> - 页面滚动时显示滚动进度的 jQuery 插件；</li> <li><a href="/misc/goto?guid=4958848917656773961">Velocity.js</a> - 用于加速 JavaScript 动画；</li> <li><a href="/misc/goto?guid=4959754545985186557">Animate on scroll</a> - 页面滚动时增添元素动画的小型库；</li> <li><a href="/misc/goto?guid=4958341606252679125">Handlebars.js</a> - JavaScript 模板引擎；</li> <li><a href="/misc/goto?guid=4958541729700401726">jInvertScroll</a> - 轻量级的 jQuery 水平视差插件；</li> <li><a href="/misc/goto?guid=4958832424456169431">One page scroll</a> - 实现苹果风格单页滚动效果的 jQuery 插件；</li> <li><a href="/misc/goto?guid=4958832696600166046">Parallax.js</a> - 轻量级的视差引擎，能够对智能设备的方向作出反应；</li> <li><a href="/misc/goto?guid=4958534041848943438">Typeahead.js</a> - 搜索框自动补全的 JS 库；</li> <li><a href="/misc/goto?guid=4959754546211826055">Dragdealer.js</a> - 基于拖动的 JavaScript 组件；</li> <li><a href="/misc/goto?guid=4958834575574498450">Bounce.js</a> - 快速创建漂亮的 CSS3 动画效果；</li> <li><a href="/misc/goto?guid=4958850007294101006">Pagepiling.js</a> - 创建全屏滚动效果；</li> <li><a href="/misc/goto?guid=4958871779344012716">Multiscroll.js</a> - 创建两列垂直反向滚动效果的 jQuery 插件；</li> <li><a href="/misc/goto?guid=4958832695694964179">Favico.js</a> - 动态图标插件；</li> <li><a href="/misc/goto?guid=4958851080922949867">Midnight.js</a> - 固定头部切换效果；</li> <li><a href="/misc/goto?guid=4959754546437734338">Anime.js</a> - JavaScript 动画引擎；</li> <li><a href="/misc/goto?guid=4959754546513649750">Keycode</a> - 获取键盘按键的 JS 键码值；</li> <li><a href="/misc/goto?guid=4958828995744156149">Sortable</a> - 用于拖拽排序的 JavaScript 库；</li> <li><a href="/misc/goto?guid=4959754546635948527">Flexdatalist</a> - 支持<code><datalist></code>的 jQuery 自动完成插件；</li> <li><a href="/misc/goto?guid=4959754546706133262">Slideout.js</a> - 实现滑出式 Web App 导航菜单；</li> <li><a href="/misc/goto?guid=4959754546796648455">Jquerymy</a> - 实时、复杂的双向数据绑定 jQuery 插件；</li> <li><a href="/misc/goto?guid=4959728701109771983">Cleave.js</a> - 自动格式化表单输入框的文本内容；</li> <li><a href="/misc/goto?guid=4959754546904465460">Page</a> - 构建单页应用的小型客户端路由库；</li> <li><a href="/misc/goto?guid=4959754546989766980">Selectize.js</a> - 基于 jQuery 的<code><select></code> UI 控件，用于创建<code>tag</code>标签输入框和 select 下拉框；</li> <li><a href="/misc/goto?guid=4958975873857819695">Nice select</a> - 创建漂亮下拉框的 jQuery 插件；</li> <li><a href="/misc/goto?guid=4959754547093077145">Tether</a> - 使用绝对定位创建两个互相相关元素的 JS 库；</li> <li><a href="/misc/goto?guid=4959615962844491744">Shepherd.js</a> - 创建新手引导的 JS 库；</li> <li><a href="/misc/goto?guid=4959628475485886697">Tooltip</a> - 工具提示插件；</li> <li><a href="/misc/goto?guid=4958872981257799866">Select2</a> - 基于 jQuery 的替代选择框；</li> <li><a href="/misc/goto?guid=4959754547269999594">IziToast</a> - 轻量的跨浏览器响应式消息通知插件；</li> <li><a href="/misc/goto?guid=4959754547348958768">IziModal</a> - 炫酷的 jQuery 模态窗口插件。</li> </ul> <h2>CSS 库与设计资源</h2> <ul> <li><a href="/misc/goto?guid=4958960993055021935">Animate.css</a> - 强大的 CSS3 动画库；</li> <li><a href="/misc/goto?guid=4959754547461193203">Flat UI Colors</a> - 漂亮的扁平化配色；</li> <li><a href="/misc/goto?guid=4959754547548448973">Material Design Lite</a> - 基于谷歌 Material Design 的前端框架；</li> <li><a href="/misc/goto?guid=4959754547640011177">Colorrrs</a> - 随机颜色生成器；</li> <li><a href="/misc/goto?guid=4959754547726452566">Section separators</a> - CSS 区域分割；</li> <li><a href="/misc/goto?guid=4958535706512637813">Topcoat</a> - 专注为简洁、快速的 Web 应用提供 CSS 开发的工具；</li> <li><a href="/misc/goto?guid=4959754547840826950">Create Ken Burns Effect</a> - 利用 CSS3 实现的 Ken burns 特效；</li> <li><a href="/misc/goto?guid=4959754547936262441">DynCSS</a> - 用于分析 CSS <code>-dyn-</code>属性规则，并使其具备动态属性；</li> <li><a href="/misc/goto?guid=4959735483822337904">Magic animations</a> - 具备特殊动效的 CSS3 动画；</li> <li><a href="/misc/goto?guid=4959754548050866385">CSSpin</a> - 丰富的 CSS 加载动画；</li> <li><a href="/misc/goto?guid=4959754548131765378">Feather icons</a> - 简单、漂亮的开源图标库；</li> <li><a href="/misc/goto?guid=4959620023920679292">Ion icons</a> - 专为 Ionic 框架设计的图标字体；</li> <li><a href="/misc/goto?guid=4958853181012494445">Font Awesome</a> - 可缩放的矢量图标字库；</li> <li><a href="/misc/goto?guid=4959754548276746719">Font Generator</a> - 在线字体生成器；</li> <li><a href="/misc/goto?guid=4958871306730970908">On/Off FlipSwitch</a> - 在线创建纯 CSS3 动画开关效果；</li> <li><a href="/misc/goto?guid=4959748870710466120">UIkit</a> - 轻量级的模块化前端框架；</li> <li><a href="/misc/goto?guid=4958332662969681733">Bootstrap</a> - 著名的前端框架；</li> <li><a href="/misc/goto?guid=4958338175196780124">Foundation</a> - 著名的前端框架。</li> </ul> <h2>有用的产品/链接</h2> <ul> <li><a href="/misc/goto?guid=4959733733430775309"><head> Cheatsheet</a> - 可以写入到<code><head></code>标签的内容清单；（译者注：中文翻译版<a href="/misc/goto?guid=4959754548515108226">地址</a>）</li> <li><a href="/misc/goto?guid=4958825281526224555">Ghost</a> - 基于 Node.js 的简易博客平台；</li> <li><a href="/misc/goto?guid=4959754548628465898">What runs</a> - 用于网站技术分析的 Chrome 插件；</li> <li><a href="/misc/goto?guid=4959754548720956367">Learn anything</a> - 用于分解项目的强大思维导图。</li> </ul> <p>以上就是我个人常用的一些前端工具、框架、库的列表，希望对大家有所帮助。如果你也愿意分享一些新的发现，可以在<a href="/misc/goto?guid=4959754548803106706">推特</a>上随时联系我。</p> <p>感谢你的阅读。若你有所收获，欢迎点赞与分享。</p> <p>来自：http://www.jianshu.com/p/c95e400e43b6<br> </p> <p> </p>