标签(空格分隔): 资料
出处:https://coding.net/u/f2e/p/Books/git/tree/master/%E7%A7%BB%E5%8A%A8Web
包含pc端,移动端js库,框架,css框架,工具等等…在原文基础上添加修改
有些虽已经年代久远,但仍然可以学到很多有用的东西,可以整理资料的链接和其他链接资料或许有重复…… –>>另外一个链接:分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者 库
常用库查询系统
移动端资料
- 支付宝无线Web开发经验谈
- 移动前端系列——移动端页面坑与排坑技巧( 2014-12-08 )
- 移动web最佳实践(2013)
- 移动Web前端框架 ( 2014 )
- 移动端自适应方案-lib.flexible,淘宝手机版都是用这个框架
- iOS 微信 音频 视频自动播放
- 解决ios下的微信打开的页面背景音乐无法自动播放
- 微信JS-SDK说明文档
- 微信js demo
- QQ浏览器X5内核问题汇总
- 手机分辨率查询
- 移动端响应式框架-测试阶段,不适用于复杂页面
学习资料/文章
- 渲染性能
- awesome-javascript
- JavaScript教程 – 廖雪峰的官方网站
- Github使用指南-从新手到专家
- node.js中文资料导航
- 了不起的Nodejs Nodejs的各种资源,英文
- AngularJS ,一些关于 AngularJS 的博客,文章,视频,书籍等
- HelloSea.js seajs教程
- HTTP API 设计指南
- JSON API:用 JSON 构建 API 的标准指南中文版
- 了不起的React React的各种资源,英文
- 一家伙(s5s5)学习css3动画的心得
- 让WEB前端的变优雅的东东,如:代码规范,代码组织,最佳实践之类
- 前端工具推荐
- 设计规范 -强烈推荐看
- 腾讯团队web移动文章
- 视觉设计师是怎样让前端工程师 100% 实现设计效果的?
- JavaScript 秘密花园 ###书籍资料
- 免费的计算机编程类中文书籍
- 免费编程书籍
- 码农周刊整理-推荐关注
- git资料
系列文章
- 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 媒体查询库 https://github.com/eduardoboucas/include-media
- css3 动画在线制作器
- css3 渐变在线制作器
- 移动端手势表
- webkit独有的样式分析
- HTML5 Cross Browser Polyfills
- HTML5 POLYFILLS
- iPhone 6 屏幕揭秘
- 智图客户端 – 你的图片你做主,本地图片快速压缩工具
- 网站视频/音乐 扒神器 ###js插件网站
- 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常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow)
- 前端构建工具
- 前端模块管理器
- 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 前端框架
2. JavaScript 框架汇总
- JavaScript 框架
- 轻量级JavaScript框架
- JavaScript 工具库
3. 前端游戏框架(动画引擎)
- Pixi.js 3.0.7 – WebGL 国外游戏引擎 https://github.com/pixijs/pixi.js
- cocos2d-html5
- Egret Engine
- LimeJS
- EaselJS
- three.js
- AlloyStick
- The-Best-JS-Game-Framework
- CanvasEngine
- Quintus
- LayaAir 引擎 国内游戏框架,跟白鹭比较??暂时不知道
- soya2d 一个 好学、易用、强大、开源的 H5游戏引擎 现在,有你掌控
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组件
5. 基础模版
- 浏览器统一(Cross Browser)
- 响应式
6. 排版
7. 网格系统
- 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的零依赖栅格布局-瀑布流
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 识别
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
10.2 < select > 相关
10.3 单选框/复选框相关
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
- GMU 日历组件
- Mobiscroll
- Pikaday – 日期选择器
- TimelineJS – 时间轴
10.6 取色
- Colorpicker plugin for Twitter Bootstrap
10.7 标签插件(Tag)
10.8 自动完成插件
- At.js – 一个Twitter/微博样式的@自动完成插件
- jquery-textcomplete – 智能搜索提示框/自动补全
- typeahead.js – a fast and fully-featured autocomplete library
- Awesomplete – 零依赖的简单自动完成插件 – github
10.9 样式修正
11. 图表绘制/图形库(Graphics)
- Highcharts
- Chart.js – 基于HTML5的JavaScript图表
- 百度 ECharts
- Chartist.js
- D3.js – A JavaScript visualization library for HTML and SVG.
- intro-to-d3 – a D3.js tutorial
- Bonsai – 一个功能强大的JavaScript图形库
- Epoch – 漂亮、平稳流畅和高性能可视化的图表库
- SVG 2D绘图
- SVG Morpheus – SVG图形变形动画
12. 日期格式化
- Moment.js – 日期处理
- Smart Time Ago – 显示相对时间
- FormatJS – 让你的 Web 应用程序国际化 ####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 瀑布流
13.3 懒加载/加载监听/预加载
- 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
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)
- NProgress.js
- progress.js
- Pace – Automatic page load progress bar
- jquery-ajax-progress
- waitMe – 很漂亮的loading效果
- spin.js
- sonic.js
- fakeLoader.js – 依赖jQ的全屏加载js
13.7 侧滑插件(offcancas)
- pushy – a responsive off-canvas navigation menu
- Slideout.js – 一个用于移动 Web 应用的触摸滑出式导航菜单
13.8 菜单(Menu)
13.9 滚动侦测(ScrollSpy)
13.10 滚动加载更多/下拉刷新(Pull to Refresh)
- jScroll
- web-pull-to-refresh
- pulltorefresh
- RubberBand.js – add pull-to-refresh functionality to any page.
- infinity.js/∞ .js 无限下拉加载
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 分屏滚动
13.14 转场效果
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 触控事件
13.17 拖拽组件
13.18 隐藏或展示页面元素
13.19 滚动条(Scrollbar)
- jQuery-slimScroll pc效果不错5k,手机端不建议是用
- jquery.mCustomScrollbar pc,苹果效果不错,安卓效果略差,大小较大
- jScrollPane
- jquery.scrollbar
- perfect-scrollbar
- nanoScrollerJS
- tinyscrollbar
13.20 视差滚动(Parallax Scrolling)
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 -注释动画
- 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
17. 本地存储
18. 模板引擎
- vue.js ie9+
- paperclip.js ie8+
- mustache.js
- Handlebars.js
- artTemplate
- baiduTemplate
- JSRender
- EJS – JavaScript Templates
- Juicer – A Light Javascript Templete Engine.
- Tempo
- json2html
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 – 模态窗口插件
20. 提示控件(Tooltips)
- qTip2 – Pretty powerful tooltips
- tooltip – CSS Tooltips
- tooltipster – A jQuery tooltip plugin
- grumble.js – 气泡形状的提示(Tooltip)控件
- Ouibounce – 离站提示控件
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. 目录树插件
24. Ajax模块
25. 音频/视频
- 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 项目。
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)
29. 颜色(CSS Colors)/SVG
30. 选项卡(Tabs)
31. 文本处理
- ZeroClipboard – 文本复制插件
- Bigfoot – 点击文章中的脚注弹窗显示
- Annotator – 文本注解插件,可以包括注释、标签、用户等
- Succinct – 用作截断多行文本,后面添加省略号
- 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)
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单位媒体查询库
34.1 分页
35. 未知分类
- Rainyday.js – 实现雨滴效果
- Reveal.JS – 替代PPT,演示文稿。
- Gif.JS 是一个能运行在你的浏览器中的JavaScript GIF编码器。
- Sir Trevor是一个会完全重绘网页内容的工具:直观的编辑网页内容而不用假定任何关于它是如何重绘的事。
- feature.js 检测浏览器是否支持某属性
- 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
36. Canvas库
– create.js