# web_js_css_frame

**Repository Path**: dericgit/web_js_css_frame

## Basic Information

- **Project Name**: web_js_css_frame
- **Description**: 前端开发的干货,包含pc端,移动端js库,框架,css框架,工具等等...
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 7
- **Created**: 2015-06-15
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一些前端开发的干货

标签（空格分隔）： 资料
#####出处:https://coding.net/u/f2e/p/Books/git/tree/master/%E7%A7%BB%E5%8A%A8Web
######包含pc端,移动端js库,框架,css框架,工具等等...在原文基础上添加修改
----
有些虽已经年代久远，但仍然可以学到很多有用的东西,可以整理资料的链接和其他链接资料或许有重复......
[-->>另外一个链接:分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者](https://github.com/qingniao99/front-end-collect)

###移动端资料
- [支付宝无线Web开发经验谈](http://am-team.github.io/amg/dev-exp-doc.html)
- [移动前端系列——移动端页面坑与排坑技巧( 2014-12-08 )](http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201411/290576.shtml)
- [移动web最佳实践（2013）](http://www.ipresst.com/play/528892e11d0495f30f00762e)
- [移动Web前端框架 ( 2014 ) ](http://www.jingwentian.com/t-135)
- [移动端自适应方案-lib.flexible,淘宝手机版都是用这个框架](https://github.com/amfe/lib.flexible)
- [iOS 微信 音频 视频自动播放](http://www.w3ctech.com/topic/1165#rd)

###学习资料/文章
 - [node.js中文资料导航](https://github.com/youyudehexie/node123)
 - [了不起的Nodejs Nodejs的各种资源,英文](https://github.com/vndmtrx/awesome-nodejs)
 - [AngularJS ,一些关于 AngularJS 的博客，文章，视频，书籍等](https://github.com/justjavac/AngularJS-Learning-zh_CN)
 - [HelloSea.js seajs教程](https://github.com/island205/HelloSea.js)
 - [HTTP API 设计指南](https://github.com/ZhangBohan/http-api-design-ZH_CN)
 - [JSON API：用 JSON 构建 API 的标准指南中文版](https://github.com/justjavac/json-api-zh_CN)
 - [了不起的React React的各种资源,英文](https://github.com/enaqx/awesome-react)
 - [一家伙（s5s5）学习css3动画的心得](https://github.com/s5s5/CSS-Animations)
 - [让WEB前端的变优雅的东东，如：代码规范，代码组织，最佳实践之类](https://github.com/iamjoel/be-grace-front-end-developer)
 - [前端工具推荐](https://github.com/codylindley/frontend-tools)

###书籍资料
 - [免费的计算机编程类中文书籍](https://github.com/justjavac/free-programming-books-zh_CN)
 - [免费编程书籍](https://github.com/vhf/free-programming-books/blob/master/free-programming-books-zh.md)
 - [码农周刊整理-推荐关注](https://github.com/nemoTyrant/manong)


-----------
###其他工具
 
 [HTML5 与 CSS3 技术应用评估](http://html5please.com/ "html5与css3技术应用评估")
 
 [各种奇妙的hack](http://browserhacks.com/ "各种奇妙的hack")
 
 [几乎所有设备的屏幕尺寸与像素密度表](http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density "几乎所有设备的屏幕尺寸与像素密度表")
 
 [移动设备参数表](http://screensiz.es/phone "移动设备参数表")
 
 [ios端移动设备参数速查](http://ivomynttinen.com/blog/the-ios-design-cheat-sheet-volume-2/ "ios端移动设备参数速查")
 
 [浏览器兼容表](http://www.quirksmode.org/compatibility.html "浏览器兼容表")
 
 [移动设备查询器](https://deviceatlas.com/device-data/devices "移动设备查询器")
 
 [移动设备适配库](http://51degrees.codeplex.com/ "移动设备适配库")
 
 [移动设备适配库2](http://detectmobilebrowsers.com/ "移动设备适配库2")
 
 [viewport与设备尺寸在线检测器](https://deviceatlas.com/device-data/devices "viewport与设备尺寸在线检测器")
 
 [html5 移动端兼容性速查](http://mobilehtml5.org/ "html5移动端兼容性速查")
 
 [在线转换字体](http://www.fontsquirrel.com/tools/webfont-generator "在线转换字体")
 
 [css3 选择器测试](http://tools.css3.info/selectors-test/test.html "css3选择器测试")
 
 [兼容性速查表](http://caniuse.com/ "兼容性速查表")
 
 [浏览器的一些独特参数](http://www.browserscope.org/ "浏览器的一些独特参数")
 
 [各种各样的媒体查询收集](http://nmsdvid.com/snippets/ "各种各样的媒体查询收集")
 
 [css3 动画在线制作器](http://ecd.tencent.com/css3/tools.html "css3动画在线制作器")
 
 [css3 渐变在线制作器](http://www.colorzilla.com/gradient-editor/ "css3渐变在线制作器")
 

[移动端手势表](http://ww1.sinaimg.cn/bmiddle/c2c57f68jw1e4fh7dmw12j20fi2w6qe1.jpg "移动端手势表")


[webkit独有的样式分析](http://ued.ctrip.com/blog/wp-content/webkitcss/ "webkit独有的样式分析")

[HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)

[HTML5 POLYFILLS](http://html5polyfill.com/ "HTML5 POLYFILLS")

[iPhone 6 屏幕揭秘](http://wileam.com/iphone-6-screen-cn/)

###js插件网站
 - [OpenLib--http://www.open-lib.com/](http://www.open-lib.com/)
 - [Query插件库--http://www.jq22.com/](http://www.jq22.com/)
 - [jquery之家--http://www.htmleaf.com/](http://www.htmleaf.com/)
 - [分享天空--http://www.sharetk.com/](http://www.sharetk.com/)
 - [jQuery Script--http://www.jqueryscript.net/](http://www.jqueryscript.net/)
 - [dowebok 做好网站--http://www.dowebok.com/ ](http://www.dowebok.com/)
 - [Web前端开发--http://www.zjgsq.com/](http://www.zjgsq.com/)
 
###前端组件库
>搭建web app常用的样式/组件等收集列表(移动优先)

####0. 前端自动化(Workflow)

- 前端构建工具
  - [Yeoman - a set of tools for automating development workflow](https://github.com/yeoman/yeoman) 
  - [gulp - The streaming build system](http://gulpjs.com/) 
  - [grunt - the JavaScript Task Runner](http://gruntjs.com/)
  - [F.I.S - 前端集成解决方案](https://github.com/fex-team/fis)
- 前端模块管理器
  - [Bower - A package manager for the web](http://bower.io/)
  - [Browserify](http://browserify.org/)
  - [Component](https://github.com/componentjs/component)
  - [Duo](http://duojs.org/)
  - [RequireJS](http://requirejs.org/)
  - [Sea.js](http://seajs.org/)
  - [webpack](http://webpack.github.io/docs/)
- css预处理器
  - [Less - Less is More , Than CSS](http://lesscss.org/) 
  - [Sass - Syntactically Awesome Style Sheets](http://sass-lang.com/)
  - [Stylus - Expressive, dynamic, robust CSS](http://learnboost.github.io/stylus/)

####1. 前端框架(Frameworks)

- [Bootstrap](https://github.com/twbs/bootstrap)
- [Foundation](https://github.com/zurb/foundation)
- [Amaze UI](http://amazeui.org/)
- [Semantic UI](https://github.com/semantic-org/semantic-ui)
- [Pure CSS](http://purecss.io/)
- [topcoat](https://github.com/topcoat/topcoat)
- [UIkit](https://github.com/uikit/uikit)
- [Material UI](https://github.com/callemall/material-ui)
- [Framework7](http://www.idangero.us/framework7)
- [mui](https://github.com/dcloudio/mui)
- [ionic framework](http://ionicframework.com/)
- [Fries](https://github.com/jaunesarmiento/fries)
- [jQuery Mobile](http://jquerymobile.com/)
- [H-ui 前端框架](http://h-ui.net/index.shtml)
####2. JavaScript 框架汇总

- JavaScript 框架
  - [react](https://github.com/facebook/react)
  - [Angular](https://github.com/angular/angular)
  - [jQuery](https://github.com/jquery/jquery)
  - [Backbone.js](https://github.com/jashkenas/backbone)
  - [Ractive.js](https://github.com/ractivejs/ractive)
  - [KISSY](https://github.com/kissyteam/kissy)
  - [Zepto.js](https://github.com/madrobby/zepto)
  - [ZeptoBuilder是Zepto的一个在线版本，从列表中选取你想包含的文件，就能得到你自定义的构建了](http://github.e-sites.nl/zeptobuilder/)
  - [Vanilla JS](http://vanilla-js.com/)
  - [Avalon](https://github.com/RubyLouvre/avalon)
  - [Sprint.js - 一个高性能、小体积的 DOM 操作库 (Benjamin De Cock) ](https://github.com/bendc/sprint)
  - [JSLite.js](http://jslite.io/)
- 轻量级JavaScript框架
  - [Min.js - Super minimal selector and event library](https://github.com/remy/min.js) 
  - [skel.js - A lightweight responsive framework](https://github.com/n33/skel)
- JavaScript 工具库
  - [underscore.js](https://github.com/jashkenas/underscore)
  - [Way.js - 双向数据绑定库](https://github.com/gwendall/way.js)
  - [Keys.js - 应用快捷键](https://github.com/bitwalker/keys.js)
  - [Mousetrap - 键盘快捷键操作](https://github.com/ccampbell/mousetrap)
  - [Vue.js - 数据驱动的组件化MVVM库](https://github.com/yyx990803/vue)

####3. 前端游戏框架

- [cocos2d-html5](https://github.com/cocos2d/cocos2d-html5)
- [Egret Engine](http://www.egret-labs.org/)
- [LimeJS](https://github.com/digitalfruit/limejs)
- [EaselJS](https://github.com/CreateJS/EaselJS)
- [three.js](https://github.com/mrdoob/three.js)
- [AlloyStick](https://github.com/AlloyTeam/AlloyStick)
- [The-Best-JS-Game-Framework](https://github.com/finscn/The-Best-JS-Game-Framework)
- [CanvasEngine](https://github.com/RSamaium/CanvasEngine)
- [Quintus](https://github.com/cykod/Quintus)

####4. ui组件库

- [GMU - 基于zepto的ui组件库，适用于移动端](https://github.com/fex-team/GMU)
- [FrozenUI - 腾讯移动端组件库](https://github.com/frozenui/frozenui)
- [NEC](http://nec.netease.com/)
- [NEJ](http://nej.netease.com/)
- [Pure CSS Components](https://github.com/LFeh/css-components/)
- [magic-of-css](https://github.com/adamschwartz/magic-of-css)
- [Primer - The CSS toolkit and guidelines that power GitHub](https://github.com/primer/primer)
- [ZUI - 一个开源前端实践方案，帮助你快速构现代跨屏应用。][1]
- [WeX5开源前端][2]
- [B-JUI][3]

####5. 基础模版
- 浏览器统一(Cross Browser)
  - [HTML5 BOILERPLATE](https://github.com/h5bp/html5-boilerplate)
  - [Modernizr](https://github.com/Modernizr/Modernizr)
  - [Normalize.css](https://github.com/necolas/normalize.css/)
  - [cssFx - 为CSS3自动生成浏览器前缀](https://github.com/imsky/cssFx)
  - [-prefix-free - Break free from CSS prefix hell](https://github.com/LeaVerou/prefixfree)
- 响应式
  - [Responsive - 响应式布局](https://github.com/ResponsiveBP/Responsive)
  - [Enquire.js - Awesome Media Queries in JavaScript](https://github.com/WickyNilliams/enquire.js)
  - [Free Wall - 创建桌面，移动和平板的动态网格布局](https://github.com/kombai/freewall)

####6. 排版

- [yue.css](https://github.com/lepture/yue.css)
- [typo.css](https://github.com/sofish/typo.css)
- [chinese-copywriting-guidelines - 中文文案排版指南](https://github.com/sparanoid/chinese-copywriting-guidelines) 

####7. 网格系统

- [grid](https://github.com/aekaplan/grid)
- [Flexbox Grid](https://github.com/kristoferjoseph/flexboxgrid)
- [MasonJS - creating a perfect grid](https://github.com/DrewDahlman/Mason)

####8. HTML5 API 应用

- [History.js - gracefully supports the HTML5 History/State APIs](https://github.com/browserstate/history.js)
- [jquery-pjax - pushState+ajax](https://github.com/defunkt/jquery-pjax)
- [jquery-address - Deep Linking](https://github.com/asual/jquery-address)
- [Notify.js(Web Notifications API)](https://github.com/alexgibson/notify.js)

####9. UA 识别

- [detector](https://github.com/hotoo/detector)

####10. 表单处理

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

- [Validator](https://github.com/niceue/validator)
- [Parsley](https://github.com/guillaumepotier/Parsley.js)
- [jquery.form.js - jQuery Form Plugin](https://github.com/malsup/form)
- [Validform](https://github.com/haiercdboy/Validform)
- [validator.js](https://github.com/sofish/validator.js)
- [jquery-validation - jQuery Validation Plugin](https://github.com/jzaefferer/jquery-validation)
- [formvalidator.js](https://github.com/victorjonsson/jQuery-Form-Validator)
- [Fort.js – 表单填写进度提示](http://github.com/Colourity/Fort.js)
- [mailcheck - 用于检测email地址的域名](https://github.com/mailcheck/mailcheck)
- [Floatlable.js - 输入时显示placeholder文本](https://github.com/clubdesign/floatlabels.js)
- [jQuery Label Better](https://github.com/peachananr/label_better)

######10.2 < select > 相关

- [Chosen](https://github.com/harvesthq/chosen)
- [Select2](https://github.com/select2/select2)
- [bootstrap-select](https://github.com/silviomoreto/bootstrap-select)

######10.3 单选框/复选框相关

- [iCheck - 增强复选框和单选按钮](https://github.com/fronteed/iCheck)

######10.4 上传组件

- [jQuery File Upload Plugin](https://github.com/blueimp/jQuery-File-Upload)
- [百度 Web Uploader](http://fex-team.github.io/webuploader/)
- [Uploadify](http://www.uploadify.com/)
- [Plupload](https://github.com/moxiecode/plupload)
- [Fine Uploader](http://fineuploader.com/index.html)
- [arale-upload - 轻量级 iframe and html5 file uploader](https://github.com/aralejs/upload)
- [Dropzone.js - drag'n'drop library拖拽上传](https://github.com/enyo/dropzone)
- [flow.js](https://github.com/flowjs/flow.js)
- [localResizeIMG3 - 前端本地客户端压缩图片，兼容IOS，Android，PC](https://github.com/think2011/localResizeIMG3)
- [FileAPI - 是文件上传（单个/多个）、拖放支持、图像裁剪、大小调整、应用过滤器和获取文件信息](http://mailru.github.io/FileAPI/)
-[Resumable.JS 通过HTML5API提供了稳定可恢复的多文件上传功能。](http://www.resumablejs.com/)
######10.5 日期选择

- [Both Date and Time picker widget based on twitter bootstrap](https://github.com/smalot/bootstrap-datetimepicker)
- [GMU 日历组件](http://gmu.baidu.com/demo/widget/calendar/calendar.html)
- [Mobiscroll](https://github.com/acidb/mobiscroll)
- [Pikaday - 日期选择器](https://github.com/dbushell/Pikaday)
- [TimelineJS - 时间轴](http://timeline.knightlab.com/)
######10.6 取色

- [Colorpicker plugin for Twitter Bootstrap](https://github.com/mjolnic/bootstrap-colorpicker)

######10.7 标签插件(Tag)

- [TaggingJS – 可以灵活定制的 jQuery 标签系统插件](https://github.com/sniperwolf/taggingJS)
- [selectize.js](https://github.com/brianreavis/selectize.js)

######10.8 自动完成插件

- [At.js - 一个Twitter/微博样式的@自动完成插件](https://github.com/ichord/At.js)
- [jquery-textcomplete - 智能搜索提示框/自动补全](https://github.com/yuku-t/jquery-textcomplete)
- [typeahead.js - a fast and fully-featured autocomplete library](https://github.com/twitter/typeahead.js)
- [Awesomplete - 零依赖的简单自动完成插件](http://leaverou.github.io/awesomplete/) - [github](https://github.com/LeaVerou/awesomplete)
######10.9 样式修正

- [autosize - 使文本框自动适应所输入的内容](https://github.com/jackmoore/autosize)

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

- [Highcharts](https://github.com/highslide-software/highcharts.com)
- [Chart.js - 基于HTML5的JavaScript图表](https://github.com/nnnick/Chart.js)
- [百度 ECharts](https://github.com/ecomfe/echarts)
- [Chartist.js](https://github.com/gionkunz/chartist-js)
- [D3.js - A JavaScript visualization library for HTML and SVG.](https://github.com/mbostock/d3)
- [intro-to-d3 - a D3.js tutorial](https://github.com/square/intro-to-d3) 
- [Bonsai - 一个功能强大的JavaScript图形库](https://github.com/uxebu/bonsai)
- [Epoch - 漂亮、平稳流畅和高性能可视化的图表库](http://fastly.github.io/epoch/)
####12. 日期格式化

- [Moment.js - 日期处理](http://momentjs.com/)
- [Smart Time Ago - 显示相对时间](https://github.com/pragmaticly/smart-time-ago)
- [FormatJS – 让你的 Web 应用程序国际化](http://formatjs.io/)
####13. 页面交互

######13.1 Slider

- [slick - the last carousel you'll ever need](https://github.com/kenwheeler/slick/)
- [Swipe - the most accurate touch slider](https://github.com/thebird/Swipe)
- [Swiper - 移动端/pc端滑动组件比较强大](http://www.idangero.us/swiper/demos/#.VUCEQUYr_pA) - [github](https://github.com/nolimits4web/Swiper) 
- [iscroll - 简约模拟滑动层](https://github.com/cubiq/iscroll)
- [iSlider - 移动端滑动组件](https://github.com/BE-FE/iSlider)
- [OwlCarousel - create beautiful responsive carousel slider](https://github.com/OwlFonk/OwlCarousel)
- [jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件](https://github.com/jquery/jquery-mousewheel/)
- [Glide.js - 轻量级滑块组件](https://github.com/jedrzejchalubek/Glide.js)

######13.2 瀑布流

- [Masonry](http://masonry.desandro.com/)
- [Isotope - Filter & sort magical layouts](http://isotope.metafizzy.co/)

######13.3 懒加载/加载监听/预加载
- [layzr.js - git关注蛮高的](http://callmecavs.github.io/layzr.js/) - [github](https://github.com/callmecavs/layzr.js)
- [imagesLoaded](https://github.com/desandro/imagesloaded)
- [Echo.js](https://github.com/toddmotto/echo)
- [lazySizes](https://github.com/aFarkas/lazysizes)
- [jquery_lazyload](https://github.com/tuupola/jquery_lazyload)
- [BttrLazyLoading](https://github.com/shprink/bttrlazyloading/)
- [lazyload.js](https://github.com/vvo/lazyload)
- [waitForImages - 图片加载监听库](https://github.com/alexanderdickson/waitForImages)
- [PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能](https://github.com/thinkpixellab/PxLoader)
- [bindWithDelay - jQuery Plugin For Delayed Event Execution](https://github.com/bgrins/bindWithDelay)
- [TypeWatch - 停止输入时调用](https://github.com/dennyferra/TypeWatch)

######13.4 图片轮播(幻灯片)/图片展示 
- [SuperSlide - 国产的幻灯片,功能集成比较多,我个人推荐](http://www.SuperSlide2.com/)
- [FlexSlider](https://github.com/woothemes/FlexSlider)
- [unslider - 小而美的轮播库](https://github.com/idiot/unslider)
- [prettyPhoto](https://github.com/scaron/prettyphoto)
- [FlickerPlate - A cool jQuery plugin that lets you flick through content.](https://github.com/chrishumboldt/Flickerplate)
- [Holder.js - Client-side image placeholders.](https://github.com/imsky/holder)
- [RowGrid.js - 在径直的行里放置图片](https://github.com/brunjo/rowGrid.js)
- [ImageLightbox.js - 灯箱效果](http://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/)
- [JQuery Panorama Viewer - 全景视图](https://github.com/peachananr/panorama_viewer)
- [PhotoSwipe - 移动开发必备的 iOS 风格相册](http://photoswipe.com/) - [github](https://github.com/dimsemenov/photoswipe)

######13.5 图片剪裁/图片处理

- [Jcrop -  Image Cropping Plugin for jQuery](https://github.com/tapmodo/Jcrop)
- [croppic - an image cropping jquery plugin](https://github.com/sconsult/croppic)
- [jQuery.eraser - 图像擦除插件](https://github.com/boblemarin/jQuery.eraser)
- [DD_belatedPNG.js - 让IE6支持透明PNG图片](http://www.dillerdesign.com/experiment/DD_belatedPNG/)
- [FocusPoint.js 实现图片的响应式裁剪](https://github.com/jonom/jquery-focuspoint)
- [Picturefill - 一个响应式图片 JS 插件 (Scott Jehl) ](http://scottjehl.github.io/picturefill/)
- [jQuery picZoomer - 图片区域放大](http://www.jqueryscript.net/zoom/jQuery-Plugin-For-Image-Zoom-On-Hover-picZoomer.html)
- [watermark.js 为图片添加水印](http://brianium.github.io/watermarkjs/)
######13.6 进度条/加载动画(Loading)

- [NProgress.js](http://ricostacruz.com/nprogress/)
- [progress.js](https://github.com/usablica/progress.js)
- [Pace - Automatic page load progress bar](https://github.com/HubSpot/pace)
- [jquery-ajax-progress](https://github.com/englercj/jquery-ajax-progress)
- [waitMe - 很漂亮的loading效果](https://github.com/vadimsva/waitMe)
- [spin.js](https://github.com/fgnass/spin.js)
- [sonic.js](https://github.com/padolsey/sonic.js)

######13.7 侧滑插件(offcancas)

- [pushy -  a responsive off-canvas navigation menu ](https://github.com/christophery/pushy)
- [Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单](https://github.com/mango/slideout)

######13.8 菜单(Menu)

- [SuperFish - 基于jQuery的级联下拉菜单](https://github.com/joeldbirch/superfish)
- [Responsive Nav - 响应式导航](https://github.com/viljamis/responsive-nav.js)

######13.9 滚动侦测(ScrollSpy)

- [jquery-scrollspy(1)](https://github.com/sxalexander/jquery-scrollspy)
- [jquery-scrollspy(2)](https://github.com/thesmart/jquery-scrollspy)
- [Waypoints](https://github.com/imakewebthings/waypoints)
- [ScrollMagic - 像进度条一样使用滚动条](https://github.com/janpaepke/ScrollMagic)
- [onScreen - 滚动加载,滚动固定](http://silvestreh.github.io/onScreen/)
######13.10 滚动加载更多/下拉刷新(Pull to Refresh)

- [jScroll](https://github.com/pklauzinski/jscroll)
- [web-pull-to-refresh](https://github.com/apeatling/web-pull-to-refresh)
- [pulltorefresh](https://github.com/dwcares/pulltorefresh)
- [RubberBand.js - add pull-to-refresh functionality to any page.](https://github.com/ThrivingKings/RubberBand.js)
- [infinity.js/∞ .js 无限下拉加载](http://airbnb.github.io/infinity/)

######13.11 平滑滚动插件(Smooth Scroll)

- [jquery-smooth-scroll](https://github.com/kswedberg/jquery-smooth-scroll)
- [jquery.scrollTo - 平滑滚动到页面指定位置](https://github.com/flesler/jquery.scrollTo)
- [smooth-scroll](https://github.com/cferdinandi/smooth-scroll)
- [scrollUp](https://github.com/markgoodyear/scrollup)
- [Elevator.js 一个模拟电梯运行“返回顶部”的 JS 插件 (Tim Holman) ](https://github.com/tholman/elevator.js)
######13.12 全屏滚动/全屏切换

- [pagePiling.js - 全屏滚动效果](https://github.com/alvarotrigo/pagePiling.js)
- [fullPage.js](https://github.com/alvarotrigo/fullPage.js/)
- [onepage-scroll](https://github.com/peachananr/onepage-scroll)
- [zepto.fullpage - 专注于移动端的fullPage.js](https://github.com/yanhaijing/zepto.fullpage)
- [screenfull.js - 切换全屏模式](https://github.com/sindresorhus/screenfull.js)
- [Space.js – HTML 驱动的页面 3D 滚动效果](http://www.slashie.org/space.js/) - [github](https://github.com/gopatrik/space.js)
######13.13 分屏滚动

- [multiscroll.js - 分屏滚动效果](https://github.com/alvarotrigo/multiscroll.js)

######13.14 转场效果

- [Animsition - 页面切换时的过渡效果](https://github.com/blivesta/animsition)

######13.15 固定元素(Sticky)
- [Sticky-Kit 比较出名,功能强大,个人推荐](http://leafo.net/sticky-kit/)
- [ Sticky Navbar -可定点](http://www.jozefbutko.com/stickynavbar/)
- [Waypoints](http://imakewebthings.com/waypoints/)
- [sticky - jQuery Plugin for Sticky Objects](https://github.com/garand/sticky)
- [jquery.pin - 固定页面元素](https://github.com/webpop/jquery.pin)
- [stickUp](https://github.com/LiranCohen/stickUp)
- [Slinky.js - 堆叠头部创建滑动导航列表](https://github.com/iclanzan/slinky)
- [Headroom.js](http://wicky.nillia.ms/headroom.js/)
- [ScrollMagic](http://janpaepke.github.io/ScrollMagic/)
- [Sticky Float](https://github.com/yairEO/stickyfloat)
- [Sticky Mojo](http://mojotech.github.io/stickymojo/)
- [Zebra Pin](https://github.com/stefangabos/Zebra_Pin)
- [HC-Sticky](https://github.com/somewebmedia/hc-sticky)
######13.16 触控事件

- [Hammer.js](https://github.com/hammerjs/hammer.js)
- [jquery.event.move.js](https://github.com/stephband/jquery.event.move)

######13.17 拖拽组件

- [Draggabilly - 专注于拖拽功能的 JS 库](https://github.com/desandro/draggabilly)

######13.18 隐藏或展示页面元素

- [Headroom.js - 在不需要页头时将其隐藏](http://www.bootcss.com/p/headroom.js/)
- [Readmore.js - 内容显示与隐藏插件](https://github.com/jedfoster/Readmore.js)
- [oriDomi - 像指一样折叠Dom元素](https://github.com/dmotz/oriDomi)

######13.19 滚动条(Scrollbar)

- [jScrollPane](https://github.com/vitch/jScrollPane)
- [jquery.scrollbar](https://github.com/gromo/jquery.scrollbar)
- [perfect-scrollbar](https://github.com/noraesae/perfect-scrollbar)
- [nanoScrollerJS](https://github.com/jamesflorentino/nanoScrollerJS)
- [tinyscrollbar](https://github.com/wieringen/tinyscrollbar)

######13.20 视差滚动(Parallax Scrolling)
- [MidnightJS 效果很赞](http://aerolab.github.io/midnight.js/)
- [parallax.js](https://github.com/wagerfield/parallax)
- [jparallax](https://github.com/stephband/jparallax)
- [StickyStack.js](http://codepen.io/mike-zarandona/full/Dasnw) [-github](https://github.com/mike-zarandona/StickyStack.js)
- [jquery.superscrollorama.js 很酷的动画效果](https://github.com/johnpolacek/superscrollorama)
####14. 代码高亮插件/代码编辑器

- [google-code-prettify](https://code.google.com/p/google-code-prettify/)
- [highlight.js](https://highlightjs.org/)
- [Rainbow](http://craig.is/making/rainbows)
- [ACE](https://github.com/ajaxorg/ace)
- [CodeMirror](https://github.com/codemirror/codemirror)
- [Crayon Syntax Highlighter](https://github.com/aramk/crayon-syntax-highlighter)
- [prism - Lightweight, robust, elegant syntax highlighting.](https://github.com/PrismJS/prism)

####15. UI Icon 组件

- [Font Awesome](http://fontawesome.io/icons/)
- [Glyphter: The SVG Font Machine](http://glyphter.com/)
- [Perfect Icons](http://perfecticons.com/)
- [iconizr](http://iconizr.com/)
- [Cikonss - 纯CSS实现的响应式Icon](http://www.bootcss.com/p/cikonss/)
- [Simple Icons](https://github.com/danleech/simple-icons)

####16. 动画(Animate)
- js动画库
 - [snabbt.js - 简约的JavaScript动画库](http://daniel-lundin.github.io/snabbt.js/)
 - [Transit - CSS transitions and transformations for jQuery](https://github.com/rstacruz/jquery.transit)
 - [Move.js - 简化CSS3动画的JS库](http://visionmedia.github.io/move.js/) - [github](https://github.com/visionmedia/move.js)
 - [Animo.js - 堆栈动画，创建跨浏览器的模糊效果【效果不错，依赖jq】](http://labs.bigroomstudios.com/libraries/animo-js) - [github](https://github.com/ThrivingKings/animo.js)
 - [Velocity.js - 加速JavaScript动画](https://github.com/julianshapiro/velocity)
 - [Morf.js 提供了一组 JavaScript 方法用于加速 CSS3的各种转换效果，支持的方法都在上图中，无需编写 CSS3 代码。](http://www.joelambert.co.uk/morf/) -  [github](https://github.com/joelambert/morf)
 - [lenticular.js - 响应倾斜或鼠标事件创建图片动画](https://github.com/thomasxiii/lenticular.js)
 - [jQuery Interactive 3D - 使用图片创建一个3D模型](https://github.com/peachananr/interactive_3d)
 - [AnimateScroll - 动画滚动,应该是定点导航动画](https://github.com/ramswaroop/animatescroll.js)
 - [jq 元素抖动库](http://jackrugile.com/jrumble/)
 - [Tween JS  JavaScript 补间动画库 canvas](http://www.createjs.com/#!/CreateJS)
 - [Rekapi 关键帧动画库](http://rekapi.com/)
 - [favico.js v0.3.4 控制游览器标签小图标](http://lab.ejci.net/favico.js/) - [github](https://github.com/ejci/favico.js)
 - [dom-animator -注释动画](http://tholman.com/dom-animator/)
 
- css动画库
 - [xless - 又一个css动画库](http://royjang.github.io/xless/) [github](https://github.com/royJang/xless)
 - [CSShake - css抖动库](http://elrumordelaluz.github.io/csshake/#1) - [github](https://github.com/elrumordelaluz/csshake) 
 - [animate.css - css3动画库](https://github.com/daneden/animate.css)
 - [all animation - 同上,有sass版本](http://clovisdasilvaneto.github.io/all-animation/) - [github](https://github.com/clovisdasilvaneto/all-animation)
 - [magic - CSS3动画特效](http://dreamsky.github.io/main/blog/magic-css.html) - [gihub](https://github.com/miniMAC/magic) 
 - [ScrollMe – 在网页中加入各种滚动动画效果](https://github.com/nckprsn/scrollme)
 - [Loaders.css - css加载动画](http://connoratherton.com/loaders) - [ github](https://github.com/ConnorAtherton/loaders.css)
 - [css-loaders - 同上](https://github.com/lukehaas/css-loaders)
 - [Hover.css](http://ianlunn.github.io/Hover/) - [github](https://github.com/IanLunn/Hover)
 - [Effeckt.css - 手机动画库](https://github.com/h5bp/Effeckt.css)
 - [NEC动画库](http://nec.netease.com/library/category/#animation)
 - [uilang - a minimal, ui-focused programming language for web designers](http://uilang.com/)
 - [csshake 带有sass版本](https://github.com/elrumordelaluz/csshake)
 - [AniJS - 一个基于声明式语法的CSS动画库](https://github.com/anijs/anijs/)
 - [SpinKit ??](https://github.com/tobiasahlin/SpinKit)
 - [JX.Animate - 腾讯css3动画库](http://alloyteam.github.io/JXAnimate/) - [github](https://github.com/AlloyTeam/JXAnimate)

####17. 本地存储

- [cross-storage - Cross domain local storage](https://github.com/zendesk/cross-storage)
- [localForage](https://github.com/mozilla/localForage)
- [pouchdb](https://github.com/pouchdb/pouchdb)
- [basil.js](https://github.com/Wisembly/basil.js)

####18. 模板引擎

- [mustache.js](https://github.com/janl/mustache.js)
- [Handlebars.js](http://www.jingwentian.com/t-66)
- [artTemplate](https://github.com/aui/artTemplate)
- [baiduTemplate](https://github.com/wangxiao/BaiduTemplate)
- [JSRender](https://github.com/BorisMoore/jsrender)
- [EJS - JavaScript Templates](https://github.com/tj/ejs)
- [Juicer - A Light Javascript Templete Engine.](https://github.com/PaulGuo/Juicer)
- [Tempo](https://github.com/twigkit/tempo)
- [json2html](https://github.com/moappi/json2html)


####19. 通知组件/弹框组件/模态窗口
- [layer.js - 国产,也是集成很多功能,个人推荐](http://sentsin.com/jquery/layer/)
- [AnimatedModal.js - CSS3  全屏模态窗口,支持 Firefox、Chrome、Safari、Opera 和 IE 10+](http://joaopereirawd.github.io/animatedModal.js/)
- [alertify.js](https://github.com/fabien-d/alertify.js)
- [AlertifyJS](https://github.com/MohammadYounes/AlertifyJS)
- [SweetAlert](https://github.com/t4t5/sweetalert)
- [Messenger - 非常酷的弹框组件](https://github.com/HubSpot/messenger)
- [PNotify](https://github.com/sciactive/pnotify)
- [Notify.js - A simple, versatile notification library](https://github.com/jpillora/notifyjs)
- [Remodal - 模态窗口插件](https://github.com/VodkaBears/Remodal)

####20. 提示控件(Tooltips)

- [qTip2 - Pretty powerful tooltips](https://github.com/qTip2/qTip2)
- [tooltip - CSS Tooltips](https://github.com/HubSpot/tooltip)
- [tooltipster - A jQuery tooltip plugin](https://github.com/iamceege/tooltipster)
- [grumble.js - 气泡形状的提示（Tooltip）控件](https://github.com/jamescryer/grumble.js)
- [Ouibounce - 离站提示控件](https://github.com/carlsednaoui/ouibounce)

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

- [fancyBox - Fancy jQuery lightbox](https://github.com/fancyapps/fancyBox)
- [jquery-lightbox - The popular lightbox script, ported to jQuery](https://github.com/krewenki/jquery-lightbox)
- [Colorbox - a jQuery lightbox](https://github.com/jackmoore/colorbox)
- [artDialog - 经典的网页对话框组件](https://github.com/aui/artDialog)
- [DialogEffects](https://github.com/codrops/DialogEffects)
- [jQuery blockUI - Page or element overlay](https://github.com/malsup/blockui/)

####22. 文档/表格/PDF

- [handsontable - 在线可编辑excel表格](https://github.com/handsontable/handsontable)
- [jQuery Bootgrid - 用于ajax生成动态表格](https://github.com/rstaib/jquery-bootgrid)
- [DataTables - Table plug-in for jQuery](https://github.com/DataTables/DataTables)
- [PDF.js - 一个 JavaScript 编写的 PDF 阅读器](https://github.com/mozilla/pdf.js)
- [jsPDF - Generate PDF files in JavaScript](https://github.com/MrRio/jsPDF)
- [Recline.js - 灵活操作和展示数据](https://github.com/okfn/recline/)
- [Dynatable - 交互式表格插件](https://github.com/alfajango/jquery-dynatable)

####23. 目录树插件

- [zTree_v3 - jQuery Tree Plugin](https://github.com/zTree/zTree_v3)
- [jstree - jQuery Tree Plugin](https://github.com/vakata/jstree)
- [fancytree - Tree plugin for jQuery](https://github.com/mar10/fancytree)

####24. Ajax模块

- [fetch - A window.fetch JavaScript polyfill](https://github.com/github/fetch)
- [reqwest - browser asynchronous http requests](https://github.com/ded/reqwest)
- [minAjax.js](https://github.com/argunner/minAjax.js/)

####25. 音频/视频
- [jWebAudio](http://01org.github.io/jWebAudio/)
- [jPlayer -  HTML5 Audio & Video for jQuery](https://github.com/happyworm/jPlayer)
- [video.js - HTML5 & Flash video player](https://github.com/videojs/video.js)
- [Accessible HTML5 Video Player - PayPal 开源的 HTML5 视频播放器](https://github.com/paypal/accessible-html5-video-player)
- [Clappr - 开源的Web视频播放器](https://github.com/clappr/clappr)
- [Plyr - 简单，灵活的 HTML5 媒体播放器](https://github.com/selz/plyr)
- [FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.](https://github.com/davatron5000/FitVids.js)
- [BigVideo.js - The jQuery Plugin for Big Background Video](https://github.com/dfcb/BigVideo.js)
- [BigScreen - A simple library for using the JavaScript Full Screen API](https://github.com/bdougherty/BigScreen)
- [Vide - 视频背景](https://github.com/VodkaBears/Vide)
- [winamp2-js](https://github.com/captbaritone/winamp2-js)
- [Buzz - A Javascript HTML5 Audio library](https://github.com/jaysalvat/buzz)

####26. 按钮

- [Buttons - A CSS button library](https://github.com/alexwolfe/Buttons)
- [ButtonComponentMorph](https://github.com/codrops/ButtonComponentMorph)
- [ProgressButtonStyles](https://github.com/codrops/ProgressButtonStyles)
- [CreativeButtons](https://github.com/codrops/CreativeButtons)
- [CSS3 buttons](https://github.com/ubuwaits/css3-buttons)
- [jquery.onoff - Interactive, accessible toggle switches for the web.](https://github.com/timmywil/jquery.onoff)

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

- [Simditor - 简单快速的富文本编辑器](https://github.com/mycolorway/simditor)
- [BachEditor - 一个有情怀的编辑器](https://github.com/Integ/BachEditor)
- [Squire – 简洁的 HTML5 富文本编辑器](http://neilj.github.io/Squire/)
- [TinyMCE](https://github.com/tinymce/tinymce)
- [bootstrap-markdown](https://github.com/toopay/bootstrap-markdown)
- [marked - markdown解析器](https://github.com/chjj/marked)
- [Markdown Plus](https://github.com/tylingsoft/markdown-plus)
- [Editor.md - 开源在线Markdown编辑器](https://github.com/pandao/editor.md)

####28. 内容提取(Readability)

- [Readability](https://code.google.com/p/arc90labs-readability/)
- [json.human.js - Json Formatting for Human Beings](https://github.com/marianoguerra/json.human.js)

####29. 颜色(CSS Colors)/SVG

- [CSS Colours](http://colours.neilorangepeel.com/)
- [SVGeneration](http://www.svgeneration.com/)
- [SVGMagic - 自动的创建PNG来兼容不支持SVG的浏览器](https://github.com/dirkgroenen/SVGMagic)
- [Adaptive Backgrounds - 从图片抽取主要颜色和应用到父元素](https://github.com/briangonzalez/jquery.adaptive-backgrounds.js)

####30. 选项卡(Tabs)

- [Easy Responsive Tabs to Accordion](https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion)
- [Responsive-Tabs](https://github.com/jellekralt/Responsive-Tabs)
- [ion.tabs - jQuery tabs plugin](https://github.com/IonDen/ion.tabs)
- [jQuery-EasyTabs](https://github.com/JangoSteve/jQuery-EasyTabs)

####31. 文本处理

- [ZeroClipboard - 文本复制插件](https://github.com/zeroclipboard/zeroclipboard)
- [Bigfoot - 点击文章中的脚注弹窗显示](https://github.com/lemonmade/bigfoot)
- [Annotator - 文本注解插件，可以包括注释、标签、用户等](https://github.com/openannotation/annotator)
- [Succinct - 用作截断多行文本,后面添加省略号](https://github.com/micjamking/Succinct)
- [Flowtype.js - 自动调整字体大小和行号](https://github.com/simplefocus/FlowType.JS)
- [flat-shadow](https://github.com/peachananr/flat-shadow)
- [FitText - A jQuery plugin for inflating web type](https://github.com/davatron5000/FitText.js)
- [Squishy 是一个jQuery插件，它能自动调整文字，准确地对其各容器](http://cmsauve.com/projects/squishy/)
- [slabText 一个jQuery插件，用于创建大的，大胆的和敏感的头条新闻。](http://freqdec.github.io/slabText/)
- [Textillate 做CSS3文字动画。](http://jschr.github.io/textillate/)
- [Bacon 是一个jQuery插件，它允许您环绕贝塞尔曲线文字或线条，它可以让您的文字沿贝塞尔曲线排列。](http://baconforme.com/)
- [Circletype.js 是一个很小的（ 2.7kb ）的jQuery插件，可以让你的字体在一个圆圈内显示。](http://circletype.labwire.ca/)
- [jQSlickWrap 是一个jQuery插件，让您可以轻松而准确地环绕浮动图像里的内容文字。](http://www.jwf.us/projects/jQSlickWrap/)
- [TypeButter 使您能为您的字体设置透明度和字间距。](http://typebutter.com/)

####32. 布局(Layout)

- 分隔面板(Split Panel)
  - [split-pane](https://github.com/shagstrom/split-pane)
####33. 实用工具/其他插件

- [jquery-cookie](https://github.com/carhartl/jquery-cookie)
- [FastClick - 处理移动端 click 事件 300 毫秒延迟](https://github.com/ftlabs/fastclick)
- [Async.js - 异步操作](https://github.com/caolan/async)
- [html2canvas - 实现纯JS网页截图](https://github.com/niklasvh/html2canvas)
- [jquery.qrcode.js - 生成二维码的 jQuery 插件](https://github.com/jeromeetienne/jquery-qrcode)
- [nakedpassword - 用脱衣女帮助检测密码强度](https://github.com/platform45/nakedpassword)
- [KityMinder - 脑图编辑工具](https://github.com/fex-team/kityminder)
- [MixitUp - 动画过滤和排序](https://github.com/patrickkunka/mixitup)
- [JQuery Tip Cards - 创建卡片交互的cards布局](https://github.com/peachananr/tip_cards)
- [Fallback.js - JavaScript library for dynamically loading CSS and JS files.](https://github.com/dolox/fallback/)
- [swfobject](https://github.com/swfobject/swfobject)

####34. sass 库
- [SpaceBase – 基于 Sass 的响应式 CSS 框架](http://spacebase.space150.com/) - [github](https://github.com/space150/spaceBase)

####35. 未知分类
 - [Rainyday.js - 实现雨滴效果](http://maroslaw.github.io/rainyday.js/)
 - [Reveal.JS - 替代PPT,演示文稿。](https://github.com/hakimel/reveal.js/)
 - [Gif.JS 是一个能运行在你的浏览器中的JavaScript GIF编码器。](http://jnordberg.github.io/gif.js/)
 - [Sir Trevor是一个会完全重绘网页内容的工具：直观的编辑网页内容而不用假定任何关于它是如何重绘的事。](http://madebymany.github.io/sir-trevor-js/)
 - [BookBlock 翻书特效](http://tympanus.net/Development/BookPreview/) - [github](https://github.com/codrops/BookBlock)

---

####前端参考集

- [frontend-guidelines - Some HTML, CSS and JS best practices.](https://github.com/bendc/frontend-guidelines)
- [Codrops - Useful resources](https://github.com/codrops)
- [Front-end Code Standards & Best Practices](http://isobar-idev.github.io/code-standards/)
- [frontend-dev-bookmarks](https://github.com/dypsilon/frontend-dev-bookmarks)
- [Airbnb 的 JavaScript 编码规范](https://github.com/airbnb/javascript)
- [Clusterize.js 可以优化你的大型数据表格的性能](http://nexts.github.io/Clusterize.js/)
还有一大波干货待整理...

----
欢迎分享你的好东西给我

 发布时间:2015-4-17日
 修正更新时间:2015-6-2日


  [1]: http://zui.sexy/
  [2]: http://git.oschina.net/X5OK/WeX5
  [3]: http://git.oschina.net/xknaan/B-JUI