huzhibin1998/web_js_css_frame

前端开发的干货,包含pc端,移动端js库,框架,css框架,工具等等...

一些前端开发的干货

---

有些虽已经年代久远，但仍然可以学到很多有用的东西,可以整理资料的链接和其他链接资料或许有重复...... -->>另外一个链接:分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者 库

推荐

• 掘金
• Easy Mock 模拟数据
• JavaScript错误监测

前端库搜索

• 玩林-前端框架搜索
• awesomes-前端资源库
• 常用库查询系统
• 常用库查询系统2 - 迷你库

前端导航

• 前端收集
• WEB前端知识库
• jsdig
• 前端笔记
• 醉牛前端
• 前端收藏夹
• web前端导航
• F2E前端导航

API文档

• css手册
• webkitcss 属性查询文档
• (英文)css属性详解 -各种参数有demo进行对比
• flex
• jQuery API 中文文档
• jQuery UI API中文文档
• Chrome 开发者工具
• Sass (3.4.21) 中文文档
• ES6 手册
• React 中文文档（V15.5.4）
• Zepto.js 中文文档
• Backbone.js 中文文档
• Underscore.js 中文文档
• JSDoc中文文档
• Bootstrap 中文文档
• Lodash 中文文档
• webpack 中文文档(2.2)
• avalon 2 中文文档
• vue1.0 中文文档
• vue2.0 中文文档
• Express 4.x API 中文手册
• rollup.js 中文文档
• Angular 中文文档

移动端资料

• 移动H5前端性能优化指南
• 支付宝无线Web开发经验谈
• 移动前端系列——移动端页面坑与排坑技巧( 2014-12-08 )
• 移动web最佳实践（2013）
• 移动Web前端框架 ( 2014 )
• 移动端自适应方案-lib.flexible,淘宝手机版都是用这个框架
• iOS 微信 音频 视频自动播放
• 解决ios下的微信打开的页面背景音乐无法自动播放
• 微信JS-SDK说明文档
• 微信js demo
• QQ浏览器X5内核问题汇总
• 手机分辨率查询
• 移动端响应式框架-测试阶段,不适用于复杂页面
• 视频H5のVideo标签在微信里的坑和技巧

学习资料/文章

• React 入门教程-中文
• 什么是正则表达式?
• 前端基础进阶系列
• Study-Step-by-Step 书籍合集
• 渲染性能
• awesome-javascript
• JavaScript教程 - 廖雪峰的官方网站
• Github使用指南-从新手到专家
• Git 学习目录
• node.js中文资料导航
• 了不起的Nodejs Nodejs的各种资源,英文
• AngularJS ,一些关于 AngularJS 的博客，文章，视频，书籍等
• HelloSea.js seajs教程
• HTTP API 设计指南
• JSON API：用 JSON 构建 API 的标准指南中文版
• 了不起的React React的各种资源,英文
• 一家伙（s5s5）学习css3动画的心得
• 让WEB前端的变优雅的东东，如：代码规范，代码组织，最佳实践之类
• 前端工具推荐
• 设计规范 -强烈推荐看 链接失效
• 腾讯团队web移动文章
• 视觉设计师是怎样让前端工程师 100% 实现设计效果的？
• JavaScript 秘密花园
• vue 教程
• 10 个原则让动画带你飞
• React Native 中文网
• cssreference.io
• 大话设计模式
• YOU MIGHT NOT NEED JQUERY - 是用原生写法代替jq
• 全景漫游VR -（淘宝造物节背后的库）
• 从零开始构建 JavaScript 技术栈
• 微信小程序开发资源汇总
• 《一起学 Node.js》彻底重写完毕
• TypeScript 入门教程
• TypeScript 官方文档

书籍资料

• 免费的计算机编程类中文书籍
• 免费编程书籍
• 码农周刊整理-推荐关注
• git资料
• 高质量的Git中文教程

一些社区

• Stack Overflow：Stack Overflow是一个与程序相关的IT技术问答网站。用户可以在网站免费提交问题，浏览问题，索引相关内容，在创建主页的时候使用简单的HTML。
• segmentfault：是**领先的开发者技术社区。

系列文章

• React.js 小书
• React 入门实例教程
• React-Native学习指南
• html5 Canvas画图系列教程目录
• web前端开发分享-目录系列
• 深入理解javascript原型和闭包系列
• 深入理解JavaScript系列
• JavaScript模式集合
• 深入理解JavaScripts设计模式系列：
• 设计模式总结,非js
• 7 天打造前端性能监控系统
• 七天学会NodeJS
• 前端之困 · XSS CookBook系列
• 一个月时间整理《深入浅出Node.js》
• 【web必知必会】——图解HTTP
• 廖雪峰-JavaScript基础教程
• MDN JavaScript基础教程
• 45个实用的JavaScript技巧、窍门和最佳实践

---

其他工具

• flexbox在线制作器
• SPARK动画平台 这是我们组做的一个动画效果平台，里面集合了所有的牛逼动画，可以让你灵感猛增！（目前已开放外网使用）
• OneDiv 这是个神奇的网站，里面的所有细节都是用一个div元素通过复杂的Css3实现的，有空可以去开开脑洞噢
• 贝塞尔曲线生成器
• HTML5 与 CSS3 技术应用评估
• 各种奇妙的hack
• 几乎所有设备的屏幕尺寸与像素密度表
• 移动设备参数表
• ios端移动设备参数速查
• 浏览器兼容表
• 移动设备查询器
• 移动设备适配库
• 移动设备适配库2
• viewport与设备尺寸在线检测器
• html5 移动端兼容性速查
• 在线转换字体
• css3 选择器测试
• 兼容性速查表
• 浏览器的一些独特参数
• 各种各样的媒体查询收集
• sass @include-media 媒体查询库
• css3 动画在线制作器
• css3 渐变在线制作器
• 移动端手势表
• webkit独有的样式分析
• HTML5 Cross Browser Polyfills
• HTML5 POLYFILLS
• iPhone 6 屏幕揭秘
• 智图客户端 – 你的图片你做主,本地图片快速压缩工具
• 网站视频/音乐 扒神器
• ELF 灵活可扩展的HTML5 构建工具

js插件网站

• jquer.in
• OpenLib--http://www.open-lib.com/
• Query插件库--http://www.jq22.com/
• jquery之家--http://www.htmleaf.com/
• 分享天空--http://www.sharetk.com/
• jQuery Script--http://www.jqueryscript.net/
• dowebok 做好网站--http://www.dowebok.com/
• Web前端开发--http://www.zjgsq.com/

前端组件库

搭建web app常用的样式/组件等收集列表(移动优先)

手势库

• TouchSwipe

vue专题

• awesomes_vue
• 『收藏』VUE优秀UI组件库合集
• cooking更易上手的前端构建工具 for vue

Vue相关开源项目库汇总

• http://www.opendigg.com/tags/front-vue
• https://github.com/opendigg/awesome-github-vue

vue ui组件库

• vue.js ie9+
• vue-axios - A small wrapper for integrating axios to Vuejs
• AT UI 由阿里通信技术团队打造基于Vue的Web组件库
• 微信UI Vux 支持@^1.0.24
• bootstrap风格 Vux 支持@v1.x.x
• material风格 vue-mdl
• Keen-UI
• Mint UI
• iView UI
• element UI 支持[email protected]
• Muse-UI - 基于 Vue 2.0 和 Material Desigin 的 UI 组件库
• Scroller for Vue 2.0
• Vue Material
• vue-amap 基于Vue 2.0 和高德地图的地图组件
• Vueditor 基于Vue 2.0 的富文本编辑器
• JRoll无限加载+下拉刷新 for Vue2
• Vue-Core-Image-Upload 2.0 一款轻量级图片裁剪上传插件
• vue-datepicker 日期拾取组件

0. 前端自动化(Workflow)

• 依赖安装
  • yarn
  • npm
• 前端构建工具
  • Yeoman - a set of tools for automating development workflow
  • gulp - The streaming build system
  • grunt - the JavaScript Task Runner
  • F.I.S - 前端集成解决方案
• 前端模块管理器
  • Bower - A package manager for the web
  • Browserify
  • Component
  • Duo
  • RequireJS
  • Sea.js
  • webpack
  • ESL是一个浏览器端、符合AMD的标准加载器，适合用于现代Web浏览器端应用的入口与模块管理。
• css预处理器
  • Sass - Syntactically Awesome Style Sheets
  • Less - Less is More , Than CSS
  • Stylus - Expressive, dynamic, robust CSS

1. 前端框架(Frameworks)

• Material-UI 移动端ui框架,效果好 github
• Frozen UI 腾讯移动UI框架
• Bootstrap
• Foundation
• Amaze UI
• Semantic UI
• Pure CSS
• topcoat
• UIkit
• Material UI
• Framework7
• mui
• ionic framework
• Fries
• jQuery Mobile
• H-ui 前端框架
• Skeleton
• HaloJS
• QMUI Web 是一个专注 Web UI

2. JavaScript 框架汇总

• JavaScript 框架

  • react
  • Angular
  • jQuery
  • Backbone.js
  • Ractive.js
  • KISSY
  • Zepto.js
  • ZeptoBuilder是Zepto的一个在线版本，从列表中选取你想包含的文件，就能得到你自定义的构建了
  • Vanilla JS
  • Avalon
  • Sprint.js - 一个高性能、小体积的 DOM 操作库 (Benjamin De Cock)
  • JSLite.js
  • Ember.js：一个用于创建 web 应用的 JavaScript MVC 框架，采用基于字符串的Handlebars模板，支持双向绑定、观察者模式、计算属性（依赖其他属性动态变化）、自动更新模板、路由控制、状态机等。

• 轻量级JavaScript框架

  • Min.js - Super minimal selector and event library
  • skel.js - A lightweight responsive framework
  • LAB.js 异步加载js

• JavaScript 工具库[扩展库]

  • es5-shim
  • [es6-promise] (https://github.com/stefanpenner/es6-promise)
  • underscore.js JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象。
  • Lodash.js 一个 JavaScript 实用工具库,提供一致性,模块化,性能和配件等功能。
  • Lazy.js 性能超越underscore和Lodash的工具类库
  • Babel.js 让浏览器支持新js ES6,其实就是把ES6,5的语法转换成旧的js形式
  • Way.js - 双向数据绑定库
  • Keys.js - 应用快捷键
  • Mousetrap - 键盘快捷键操作
  • 移动web开发调试工具AlloyLever介绍 - 打印信息
  • vConsole.js 同上
  • Hotkeys.js 捕获键盘输入和输入的组合键快捷键
  • keymaster.js 同上

3. 前端游戏框架(动画引擎)

• Hilo 跨终端的互动游戏解决方案 阿里出品
• Pixi.js v4 - WebGL 国外游戏引擎
• cocos2d-html5
• Egret Engine
• LimeJS
• EaselJS
• three.js
• AlloyStick
• The-Best-JS-Game-Framework
• CanvasEngine
• Quintus
• LayaAir 引擎 国内游戏框架,跟白鹭比较??暂时不知道
• soya2d 一个 好学、易用、强大、开源的 H5游戏引擎 现在,有你掌控
• phina.js JavaScript游戏开发库
• melon.js
• Phaser - HTML5 Game Framework
• PlayCanvas WebGL Game Engine
• Popmotion.js – 小巧，灵活的 JavaScript 运动引擎
• Dynamics.js - 创建逼真的物理动画的 JS 库
• Snabbt.js – 极简的 JavaScript 动画库

4. ui组件库

• GMU - 基于zepto的ui组件库，适用于移动端
• FrozenUI - 腾讯移动端组件库
• NEC
• NEJ
• Pure CSS Components
• magic-of-css
• Primer - The CSS toolkit and guidelines that power GitHub
• ZUI - 一个开源前端实践方案，帮助你快速构现代跨屏应用。
• WeX5开源前端
• B-JUI
• MUI 轻量级WEB框架
• jQuery WeUI - V0.7.1 WeUI 的jQuery实现版，提供了大量官方WeUI没有的组件, 同时兼容 jQuery 和 Zepto。
• Light7 手机ui组件
• bttn.css Awesome buttons for awesome projects
• CSS Pressable 3D Buttons

5. 基础模版

• 浏览器统一(Cross Browser)

  • HTML5 BOILERPLATE
  • Modernizr
  • Normalize.css
  • cssFx - 为CSS3自动生成浏览器前缀
  • -prefix-free - Break free from CSS prefix hell

• 响应式

  • Responsive - 响应式布局
  • Spectre.css - 轻量级响应式 CSS 框架
  • Wing 是一个微型（压缩后仅有4KB）响应式的 CSS 框架，它提供了一个 12 列响应式网格以及基础的样式组件集
  • Core.css 是一个用于构建响应式网站的轻量级框架。它压缩后仅有 1.3kb，同时它没有预先设定的元素和内置动画。所以适用于搭建任何小型的 Web 项目。
  • Enquire.js - Awesome Media Queries in JavaScript
  • Free Wall - 创建桌面，移动和平板的动态网格布局
  • reframe.js 让非响应式元素响应的JavaScript插件。 Reframe对iframe和video元素特别有用
  • Grid—A—Licious

6. 排版

• yue.css
• typo.css
• chinese-copywriting-guidelines - 中文文案排版指南

7. 网格系统

• flex.css - 快速入门，极速布局
• grid
• Flexbox Grid
• MasonJS - creating a perfect grid
• Juiced: a Flexbox CSS Framework
• Neutron 创建灵化、简洁网页布局的SASS框架
• flexible.gs 灵活的响应式栅格布局CSS框架
• Decorator - HTML, CSS, and JavaScrip 前端框架
• minigrid.js 只有2KB的零依赖栅格布局-瀑布流
• Reflexbox 用于React的Flexbox网格系统，提供Grid, Flex, 和Box组件用于开发

8. HTML5 API 应用

• History.js - gracefully supports the HTML5 History/State APIs
• jquery-pjax - pushState+ajax
• jquery-address - Deep Linking
• Notify.js(Web Notifications API)

9. UA 识别

• detector

10. 表单处理

10.1 表单验证(Form Validator)/表单提示

• Validator
• Parsley
• jquery.form.js - jQuery Form Plugin
• Validform
• validator.js
• jquery-validation - jQuery Validation Plugin
• formvalidator.js
• Fort.js – 表单填写进度提示
• mailcheck - 用于检测email地址的域名
• Floatlable.js - 输入时显示placeholder文本
• jQuery Label Better
• 2016 年最好用的表单验证库 SMValidator.js
• SMValidator

10.2 < select > 相关

• Chosen
• Select2
• bootstrap-select

10.3 单选框/复选框相关

• iCheck - 增强复选框和单选按钮

10.4 上传组件

• jQuery File Upload Plugin
• 百度 Web Uploader
• Uploadify
• Plupload
• Fine Uploader
• arale-upload - 轻量级 iframe and html5 file uploader
• Dropzone.js - drag'n'drop library拖拽上传
• flow.js
• localResizeIMG3 - 前端本地客户端压缩图片，兼容IOS，Android，PC
• FileAPI - 是文件上传（单个/多个）、拖放支持、图像裁剪、大小调整、应用过滤器和获取文件信息 -Resumable.JS 通过HTML5API提供了稳定可恢复的多文件上传功能。

10.5 日期选择

• 超强日历
• Both Date and Time picker widget based on twitter bootstrap
• Mobiscroll 超强扩展
• Pikaday - 日期选择器
• TimelineJS - 时间轴
• mobile-calendar 移动端日历插件，不依赖其他第三方框架
• mobile_calendar jQuery手机移动端日历日期选择
• Flatpickr ：轻量级日期时间选择器，无依赖 (英文日期)
• datePicker 一个适合移动端的日期选择插件，支持选择时间
• better-picker – 一款轻量级IOS风格的JavaScript选择器

10.6 取色

• Colorpicker plugin for Twitter Bootstrap

10.7 标签插件(Tag)

• TaggingJS – 可以灵活定制的 jQuery 标签系统插件
• selectize.js

10.8 自动完成插件

• At.js - 一个Twitter/微博样式的@自动完成插件
• jquery-textcomplete - 智能搜索提示框/自动补全
• typeahead.js - a fast and fully-featured autocomplete library
• Awesomplete - 零依赖的简单自动完成插件 - github
• Algolia Places：给输入框添加地址自动补全功能

10.8.1

• Cleave.js – 自动格式化表单输入框的文本内容

10.9 样式修正

• autosize - 使文本框自动适应所输入的内容

11. 图表绘制/图形库(Graphics)

• Highcharts
• Chart.js - 基于HTML5的JavaScript图表
• 百度 ECharts
• Chartist.js
• D3.js - D3是基于数据的文档操作javascript库,D3能够把数据和HTML、SVG、CSS结合起来,创造出可交互的数据图表。
• intro-to-d3 - a D3.js tutorial
• Bonsai - 一个功能强大的JavaScript图形库
• Epoch - 漂亮、平稳流畅和高性能可视化的图表库
• SVG 2D绘图
• SVG Morpheus - SVG图形变形动画
• Sigma是一个专用于图形绘制的JavaScript库。
• GraphicsJS ，一个轻量级的前端图形库 支持ie6
• 强大的矢量图形库：Raphael JS http://www.jianshu.com/p/81c3fc5287d1

12. 日期格式化

• Moment.js - 日期处理
• Smart Time Ago - 显示相对时间
• FormatJS – 让你的 Web 应用程序国际化
• 一个轻量级的时间处理工具库 - dateformat.js
• timeago a jQuery plugin 返回类型xxx时间之前发表,支持18种语言

13. 页面交互

13.1 Slider

• slick - the last carousel you'll ever need
• Swipe - the most accurate touch slider
• Swiper - 移动端/pc端滑动组件比较强大 - github
• iscroll - 简约模拟滑动层
• iSlider - 移动端滑动组件
• OwlCarousel - create beautiful responsive carousel slider
• jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件
• Glide.js - 轻量级滑块组件

13.2 瀑布流

• Masonry 推荐
• Isotope - Filter & sort magical layouts
• Wookmark-jQuery

13.3 懒加载/加载监听/预加载

• basket.js – 基于 LocalStorage 的资源加载器
• imagesLoaded – 检测网页中的图片是否加载完成
• layzr.js - git关注蛮高的 - github
• imagesLoaded
• Echo.js
• lazySizes
• jquery_lazyload
• BttrLazyLoading
• lazyload.js
• waitForImages - 图片加载监听库
• PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能
• jQuery.preload - 预加载图片资源
• bindWithDelay - jQuery Plugin For Delayed Event Execution
• TypeWatch - 停止输入时调用

13.4 图片轮播(幻灯片)/图片展示

• SuperSlide - 国产的幻灯片,功能集成比较多,我个人推荐
• FlexSlider
• unslider - 小而美的轮播库
• prettyPhoto
• FlickerPlate - A cool jQuery plugin that lets you flick through content.
• Holder.js - Client-side image placeholders.
• RowGrid.js - 在径直的行里放置图片
• ImageLightbox.js - 灯箱效果
• JQuery Panorama Viewer - 全景视图
• PhotoSwipe - 移动开发必备的 iOS 风格相册 - github
• lory.js
• swipe2 – 非常轻量级的一个图片滑动切换效果库,跟3版本不一样,这个用于幻灯片
• RefineSlide A 3D transform/CSS transition-enabled jQuery

13.5 图片剪裁/图片处理

• Jcrop - Image Cropping Plugin for jQuery
• croppic - an image cropping jquery plugin
• jQuery.eraser - 图像擦除插件
• DD_belatedPNG.js - 让IE6支持透明PNG图片
• FocusPoint.js 实现图片的响应式裁剪
• Picturefill - 一个响应式图片 JS 插件 (Scott Jehl)
• jQuery picZoomer - 图片区域放大
• watermark.js 为图片添加水印

13.6 进度条/加载动画(Loading)

• CSS Loader 是一个非常有用加载器。它允许开发人员利用纯 CSS 文件，以及一个空
  元素便可以快速的创建加载指示器。
• progressbar.js svg线条
• NProgress.js
• progress.js
• Pace - Automatic page load progress bar
• jquery-ajax-progress
• waitMe - 很漂亮的loading效果
• spin.js
• sonic.js
• fakeLoader.js - 依赖jQ的全屏加载js
• Easy Pie Chart

13.7 侧滑插件(offcancas)

• pushy - a responsive off-canvas navigation menu
• Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单

13.8 菜单(Menu)

• SuperFish - 基于jQuery的级联下拉菜单
• Responsive Nav - 响应式导航

13.9 滚动侦测(ScrollSpy)

• jquery-scrollspy(1)
• jquery-scrollspy(2)
• Waypoints
• ScrollMagic - 像进度条一样使用滚动条
• onScreen - 滚动加载,滚动固定
• Choreographer.js 多帧动画处理 跟ScrollMagic 类似
• moveTo.js 轻量级滚动到指定位置插件

13.10 滚动加载更多/下拉刷新(Pull to Refresh)

• jScroll
• web-pull-to-refresh
• pulltorefresh
• RubberBand.js - add pull-to-refresh functionality to any page.
• infinity.js/∞ .js 无限下拉加载
• pulltorefresh.js 下拉刷新
• infinite-scroll – 一款滚动加载按需加载的轻量级插件
• better-scroll 移动端滚动插件

13.11 平滑滚动插件(Smooth Scroll)

• jquery-smooth-scroll
• jquery.scrollTo - 平滑滚动到页面指定位置
• smooth-scroll
• scrollUp
• Elevator.js 一个模拟电梯运行“返回顶部”的 JS 插件 (Tim Holman)

13.12 全屏滚动/全屏切换

• pagePiling.js - 全屏滚动效果
• fullPage.js
• onepage-scroll
• zepto.fullpage - 专注于移动端的fullPage.js
• screenfull.js - 切换全屏模式
• Space.js – HTML 驱动的页面 3D 滚动效果 - github

13.13 分屏滚动

• multiscroll.js - 分屏滚动效果

13.14 转场效果

• Animsition - 页面切换时的过渡效果

13.15 固定元素(Sticky)

• Sticky-Kit 比较出名,功能强大,个人推荐
• Sticky Navbar -可定点
• Waypoints
• sticky - jQuery Plugin for Sticky Objects
• jquery.pin - 固定页面元素
• stickUp
• Slinky.js - 堆叠头部创建滑动导航列表
• Headroom.js
• ScrollMagic
• Sticky Float
• Sticky Mojo
• Zebra Pin
• HC-Sticky

13.16 触控事件

• Hammer.js

13.17 拖拽组件

• Draggabilly - 专注于拖拽功能的 JS 库
• jquery.event.move.js

13.18 隐藏或展示页面元素

• Headroom.js - 在不需要页头时将其隐藏
• Readmore.js - 内容显示与隐藏插件
• oriDomi - 像指一样折叠Dom元素

13.19 滚动条(Scrollbar)

• jQuery-slimScroll pc效果不错5k,手机端不建议是用
• jquery.mCustomScrollbar pc,苹果效果不错,安卓效果略差,大小较大
• jScrollPane
• jquery.scrollbar
• perfect-scrollbar
• nanoScrollerJS
• tinyscrollbar

13.20 视差滚动(Parallax Scrolling)

• MidnightJS 效果很赞
• parallax.js
• jparallax
• StickyStack.js -github
• jquery.superscrollorama.js 很酷的动画效果

14. 代码高亮插件/代码编辑器

• google-code-prettify
• highlight.js
• Rainbow
• ACE
• CodeMirror
• Crayon Syntax Highlighter
• prism - Lightweight, robust, elegant syntax highlighting.

15. UI Icon 组件

• Font Awesome
• Glyphter: The SVG Font Machine
• Perfect Icons
• iconizr
• Cikonss - 纯CSS实现的响应式Icon
• Simple Icons

16. 动画(Animate)

• js动画库

• GSAP.js 最屌的动画库

• Animate Plus CSS/SVG 动画库

• anime.js 动画库,支持svg-一直在更新

• dynamics.js js动画-很屌的样子,支持svg

• snabbt.js - 简约的JavaScript动画库

• Transit - CSS transitions and transformations for jQuery

• Move.js - 简化CSS3动画的JS库 - github

• Animo.js - 堆栈动画，创建跨浏览器的模糊效果【效果不错，依赖jq】 - github

• Velocity.js - 加速JavaScript动画

• Morf.js 提供了一组 JavaScript 方法用于加速 CSS3的各种转换效果，支持的方法都在上图中，无需编写 CSS3 代码。 - github

• lenticular.js - 响应倾斜或鼠标事件创建图片动画

• jQuery Interactive 3D - 使用图片创建一个3D模型

• AnimateScroll - 动画滚动,应该是定点导航动画

• jq 元素抖动库

• Tween JS JavaScript 补间动画库 canvas

• Rekapi 关键帧动画库

• favico.js v0.3.4 控制游览器标签小图标 - github

• dom-animator -注释动画

• KUTE.js 支持SVG等动画-手机端性能不太好

• Granim.js 简单易用的渐变动画库,纯JavaScript(< 10kB) 实现。

• txt.wav.js 让文字飞起来

• jquery.path 动画路径

• Vivus.js 是一个轻量级的JavaScript类(完全无依赖) 来允许你创建 SVG 动画，让他们显示被画出来的轨迹。 Vivus提供很多不同种类的动画。 另外还有选项，你可以按你的想法来创建一个定制的脚本来创建你的SVG动画。

• mo.js

• css动画库

• xless - 又一个css动画库 github

• CSShake - css抖动库 - github

• animate.css - css3动画库

• all animation - 同上,有sass版本 - github

• magic - CSS3动画特效 - gihub

• ScrollMe – 在网页中加入各种滚动动画效果

• Loaders.css - css加载动画 - github

• css-loaders - 同上

• Hover.css - github

• Effeckt.css - 手机动画库

• NEC动画库

• uilang - a minimal, ui-focused programming language for web designers

• csshake 带有sass版本

• AniJS - 一个基于声明式语法的CSS动画库

• SpinKit ??

• JX.Animate - 腾讯css3动画库 - github

• SpinThatShit 酷炫的Loading 动画sass库 https://matejkustec.github.io/SpinThatShit/

• OBNOXIOUS.CSS 冲击视觉的效果

17. 本地存储

• bowl.js 一个轻量级的前端资源缓存加载器
• cross-storage - Cross domain local storage
• localForage
• pouchdb
• basil.js 是一个 JavaScript 的数据持久化层库,实现了统一的 LocalStorage、Cookie 和 Session 存储。
• store.js 公开了一个简单的接口来实现跨浏览器的本地存储。

18. 模板引擎

• paperclip.js ie8+
• mustache.js
• Handlebars.js
• artTemplate
• baiduTemplate
• JSRender
• EJS - JavaScript Templates
• Juicer - A Light Javascript Templete Engine.
• Tempo
• json2html
• CMS.js是基于Jekyll的一个JavaScript网页生成器，使用普通的HTML，CSS和JavaScript的网站快捷的生成网页。

19. 通知组件/弹框组件/模态窗口

• layer.js - 国产,也是集成很多功能,个人推荐
• AnimatedModal.js - CSS3 全屏模态窗口,支持 Firefox、Chrome、Safari、Opera 和 IE 10+
• alertify.js
• AlertifyJS
• SweetAlert
• Messenger - 非常酷的弹框组件
• PNotify
• Notify.js - A simple, versatile notification library
• Remodal - 模态窗口插件
• Popper.js：强大的浮动提示库（pop 即弹出层，popper 即弹出层的内容）

20. 提示控件(Tooltips)

• qTip2 - Pretty powerful tooltips
• tooltip - CSS Tooltips
• tooltipster - A jQuery tooltip plugin
• grumble.js - 气泡形状的提示（Tooltip）控件
• Ouibounce - 离站提示控件
• SweetAlert – 替代 Alert 的漂亮的提示效果
• SweetAlert2 - 不知道是不是克隆1的自己搞一个分支
• popper.js 纯 JS 写的轻量级位置计算引擎
• Tippy.js A lightweight, pure JavaScript tooltip library 迷你提示框

21. 对话框/遮罩层/弹出层(lightbox)

• fancyBox - Fancy jQuery lightbox
• jquery-lightbox - The popular lightbox script, ported to jQuery
• Colorbox - a jQuery lightbox
• artDialog - 经典的网页对话框组件
• DialogEffects
• jQuery blockUI - Page or element overlay

22. 文档/表格/PDF

• handsontable - 在线可编辑excel表格
• jQuery Bootgrid - 用于ajax生成动态表格
• DataTables - Table plug-in for jQuery
• PDF.js - 一个 JavaScript 编写的 PDF 阅读器
• jsPDF - Generate PDF files in JavaScript
• Recline.js - 灵活操作和展示数据
• Dynatable - 交互式表格插件

23. 目录树插件

• zTree_v3 - jQuery Tree Plugin
• jstree - jQuery Tree Plugin
• fancytree - Tree plugin for jQuery

24. Ajax模块

• fetch - A window.fetch JavaScript polyfill
• reqwest - browser asynchronous http requests
• minAjax.js

25. 音频/视频

• pizzicato.js
• webaudiox.js
• jWebAudio
• jPlayer - HTML5 Audio & Video for jQuery
• video.js - HTML5 & Flash video player
• Accessible HTML5 Video Player - PayPal 开源的 HTML5 视频播放器
• Clappr - 开源的Web视频播放器
• Plyr - 简单，灵活的 HTML5 媒体播放器
• FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
• BigVideo.js - The jQuery Plugin for Big Background Video
• BigScreen - A simple library for using the JavaScript Full Screen API
• Vide - 视频背景
• winamp2-js
• Buzz - A Javascript HTML5 Audio library
• [howler.js 是一个新的 JavaScript 库用于处理 Web 的音频，该库最初是为一个 HTML5 游戏引擎所开发，但也可用于其他的 Web 项目。] (https://github.com/goldfire/howler.js)
• Flv.js 实现了 FLV 格式视频的播放
• BIDEO.JS使得添加全屏背景视频更加容易。
• loud links一个很小的JavaScript库,允许您通过HTML5添加交互式音频元素在网站播放mp3 / ogg文件，目前支持所有浏览器。
• Waud.js – 使用HTML5降级处理的Web音频库
• Wad
• Tone.js

26. 按钮

• Buttons - A CSS button library
• ButtonComponentMorph
• ProgressButtonStyles
• CreativeButtons
• CSS3 buttons
• jquery.onoff - Interactive, accessible toggle switches for the web.

27. 富文本编辑器/Markdown编辑器/Markdown解析器

• Simditor - 简单快速的富文本编辑器
• BachEditor - 一个有情怀的编辑器
• Squire – 简洁的 HTML5 富文本编辑器
• TinyMCE
• bootstrap-markdown
• marked - markdown解析器
• Markdown Plus
• Editor.md - 开源在线Markdown编辑器

28. 内容提取(Readability)

• Readability
• json.human.js - Json Formatting for Human Beings

29. 颜色(CSS Colors)/SVG

• CSS Colours
• SVGeneration
• SVGMagic - 自动的创建PNG来兼容不支持SVG的浏览器
• Adaptive Backgrounds - 从图片抽取主要颜色和应用到父元素

30. 选项卡(Tabs)

• Easy Responsive Tabs to Accordion
• Responsive-Tabs
• ion.tabs - jQuery tabs plugin
• jQuery-EasyTabs
• 以多标签页载入页面的功能插件 bTabs.js

31. 文本处理

• ZeroClipboard - 文本复制插件
• Bigfoot - 点击文章中的脚注弹窗显示
• Annotator - 文本注解插件，可以包括注释、标签、用户等
• Succinct - 用作截断多行文本,后面添加省略号
• Shave 是一个零依赖、轻量级的 JavaScript 插件，它能截断多行文本.
• Flowtype.js - 自动调整字体大小和行号
• flat-shadow
• FitText - A jQuery plugin for inflating web type
• Squishy 是一个jQuery插件，它能自动调整文字，准确地对其各容器
• slabText 一个jQuery插件，用于创建大的，大胆的和敏感的头条新闻。
• Textillate 做CSS3文字动画。
• Bacon 是一个jQuery插件，它允许您环绕贝塞尔曲线文字或线条，它可以让您的文字沿贝塞尔曲线排列。
• Circletype.js 是一个很小的（ 2.7kb ）的jQuery插件，可以让你的字体在一个圆圈内显示。
• jQSlickWrap 是一个jQuery插件，让您可以轻松而准确地环绕浮动图像里的内容文字。
• TypeButter 使您能为您的字体设置透明度和字间距。

32. 布局(Layout)

• 分隔面板(Split Panel)
  • split-pane

33. 实用工具/其他插件

• jquery-cookie
• FastClick - 处理移动端 click 事件 300 毫秒延迟
• Async.js - 异步操作
• html2canvas - 实现纯JS网页截图
• jquery.qrcode.js - 生成二维码的 jQuery 插件
• nakedpassword - 用脱衣女帮助检测密码强度
• KityMinder - 脑图编辑工具
• MixitUp - 动画过滤和排序
• JQuery Tip Cards - 创建卡片交互的cards布局
• Fallback.js - JavaScript library for dynamically loading CSS and JS files.
• swfobject

34. sass 库

• Family.scss - css3选择器简写框架,非常不错
• SpaceBase – 基于 Sass 的响应式 CSS 框架 - github
• breakpoint-sass 媒体查询库
• @include-media diy媒体查询库
• sass-mediaqueries 媒体查询库-推荐 -demo
• sass-mq Media Queries with superpowers-em单位媒体查询库
• sass-svg 一个内联 SVG 的 SASS 库

34.1 分页

• jqPagination 分页插件

34.2 模拟打字

• jQuery.type-typetype 用于textarea文本域;
• typing.js 华丽的打字效果JS插件
• superplaceholder.js 利用文本框的 placeholder 属性，以打字形式展示出自定义的文字，可用于提示。
• iTyped.js 实现打字效果

35. 未知分类

• 使用 tictac.js 实现倒计时
• 一个大小约 2k 的图片高斯模糊库 —— blurify.js
• Rainyday.js - 实现雨滴效果
• Reveal.JS - 替代PPT,演示文稿。
• Gif.JS 是一个能运行在你的浏览器中的JavaScript GIF编码器。
• Sir Trevor是一个会完全重绘网页内容的工具：直观的编辑网页内容而不用假定任何关于它是如何重绘的事。
• feature.js 检测浏览器是否支持某属性
• a browser detector 检测浏览器类型,包括手机
• Mock.js 生成随机数据,拦截ajax
• BookBlock 翻书特效 - github
• intro.js 引导用户页面
• CSS滤镜 CSSgram
• Transformicons - CSS/SVG 元素模拟 图标/符号动画-过渡
• CSS 滤镜在线调试
• glfx.js canvas图片处理滤镜
• Crayon.css CSS颜色变量名与16进制对应列表。
• SVG圆形菜单生成器
• 优化和配置SVGO的WEB应用
• CSS单位对比视图
• 使用GUI快速创建SVG path
• 把CSS代码转成SASS的应用
• resizr 测试 CSS media queries 的轻量级应用-需要线上地址,没有线上地址,可以搞个coding-git
• 在线ppt
• flash文件转 canvas - Flash2x Tool http://www.annie2x.com/docs/
• testcafe 浏览器测试工具-类似(测试单元工具)
• Fuse.js 关键字-模糊查询
• Navigo 一个简单的简单的JavaScript路由，兼容老版本浏览器。
• Wysiwyg.css 使用漂亮的主题从HTML或Markdown生成文档
• sphinx.js 一个能够把字符串编码成png图片，或者从png图片中解码出字符串的超轻量级开源库
• Wenk 是一个轻量级纯 CSS 写的文本工具提示库。
• CurrencyFormatter.js 是一款简单实用的纯 JS 格式化货币库。它支持 155 种不同国家的货币格式，以及超过 700 种不同语言的本地化设置。
• Numeral.js – 格式化和操作数字的 JavaScript 库
• CCapture.js 可以使用固定的帧率实现对网页中 Canvas 的动画进行捕获，录制成视频。CCapture.js 依赖于 Whammy.js 和 gif.js。
• Base64.js
• Turntable.js 一款响应式 jQuery 滑块插件，可以创建一个类似3D图像旋转展示的效果。
• css3d-engine 全景漫游VR
• Pressure是一个允许您通过一个API在Safari浏览器上同时使用Force Touch and 3D Touch的JavaScript库
• [苹果手机 视频内联播放 iphone-inline-video] (https://github.com/bfred-it/iphone-inline-video)
• Immutable.js – JavaScript 不可变数据集合（Facebook出品） 用处?
• Fort.js – 时尚、现代的表单填写进度提示效果
• MagicSuggest – Bootstrap 主题的多选组合框
• Draggabilly – 轻松实现拖放功能（Drag & Drop）
• scrollReveal.js – 使元素以非常酷帅的方式进入画布 (Viewpoint)
• share.js 一键分享
• Anchorme 是一个强大的 JavaScript 库，它可以接收任何字符串或文本文件，并检测其中的所有 URL 地址
• 500 个科幻主题的免费矢量图标网站
• 图片文字转真实文字
• WOWSlider css3幻灯片-软件生成
• marky.js 性能分析
• opentype.js web字体设计?
• gka 是一款简单的、高效的帧动画生成工具，图片处理工具,快速制作高性能帧动画解决方案
• Valine 留言板系统

36. Canvas库

• jCanvas - 语法简单实现canvas的js 库
• create.js
• Canvas Gauges 是一个利用纯 JavaScript 和 HTML5 Canvas（画布）打造的可完全自定义的仪表，你可以用它来创建诸如机动车速度表、温度计等类型的测量设备。
• APNG to Canvas 支持apng图片
• particles.js 背景的粒子动画生成库
• Fabric.js 是一个简单而强大的 JavaScript Canvas 库
• 腾讯 AlloyTeam 正式发布 Canvas 魔幻线条 - curve.js
• Fanvas 一键把swf转为html5 canvas动画

---

前端参考集

• frontend-guidelines - Some HTML, CSS and JS best practices.
• Codrops - Useful resources
• Front-end Code Standards & Best Practices
• frontend-dev-bookmarks
• Airbnb 的 JavaScript 编码规范
• Clusterize.js 可以优化你的大型数据表格的性能 还有一大波干货待整理...

---

欢迎分享你的好东西给我@黑色技术

发布时间:2015-4-17日