Piwik open-source analytics platform
http://unslider.com/ http://www.woothemes.com/flexslider/
选择原则: Do one thing do good, K.I.S.S., micro, NO dependency, CN
RequireJS 2.x
jQuery, Zepto
Backbone 1.x, Angular 1.2.x
Bootstrap 3.x, Font Awesome
Undercore 1.x, Moment, crypto-js, jStorage, Cordova 3.x
iScroll 5.x, jquery.animate-enhanced, Transit, Highcharts, BxSlider, iCheck, Brute Select, DataTables
cdn.code.baidu.com 看到 oj.js
Material Design Lite Components in HTML/CSS/JS 太惊艳了, OMG~ 谁用谁知道啊!
Bootstrap | Material design theme for Bootstrap | Materialize
generator-aio-angular Material Design by LumX
UIkit A lightweight and modular front-end framework for developing fast and powerful web interfaces. 相当于bootstrap, 但组件更为丰富一些
Pure.css CSS with a minimal footprint. Pure is ridiculously tiny. The entire set of modules clocks in at 4.0KB minified and gzipped.
基于bootstrap开发的前端组件库, 同时也是一套设计规范 国产的当然有很多符合国情的组件啦
Framework7 Mobile HTML framework to develop web apps with iOS & Android native look and feel. 对 Android 兼容性不是很好, 可以选择试一试 Framework7-Plus 其他可选 Light7 兼容性和 SUI Mobile 一样
WeUI | weui.js | vux | jquery-weui WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一
阿里巴巴国际UED团队基于 Framework7 开发的手机H5 UI库。它的特点是非常轻量，并且能很好兼容 iOS 6.0+ 和 Android 4.0+ 的设备。兼容性 iOS 6+ 以及 Android 4.0+
Mint UI 基于 Vue.js 的移动端组件库 https://zhuanlan.zhihu.com/p/21802181
Yo@Qunar 一款基于 Mobile First 理念而设计的 CSS Framework
基于zepto的ui组件库，适用于移动端由百度GMU小组开发
NovaUI 奇舞团基于Zepto的移动UI组件库
Motion 基于ZeptoJS，为移动终端Web应用量身定制的组件库，重点开发结合HTML5新特征的创新实用组件
OnsenUI CSS 组件都是独立的, 可以选择性使用, 非常方便
AdminLTE Dashboard & Control Panel Template
FrozenUI 腾讯移动端UI框架, FrozenUI的CSS组件库,基于腾讯手Q样式规范
Ant Design 蚂蚁金服体验技术部出品, 提供了很多炫酷的组件, 值得借鉴, 特别是 QueueAnim 进出场动画
UXCore 为企业级后端应用而生. UXCore is a set of React Components that is designed for enterprise-class pc backend application.
radon-ui 基于 Vue 开发的高质量UI组件
jQuery | Zepto | You Don't Need jQuery
AlloyTeam/Nuclear Some HTML + Scoped CSS + JS === Reusable Component
colors Better colors for the web
HaloJS 基于 Zepto 并采用 CMD 规范面向移动端提供各种实用工具的组件库
laytpl 1KB 具备转义安全机制
Laytpl Error：TypeError: Cannot read property 'name' of undefined
<h3>{{= d.title }}</h3>
<p class="intro">{{= d.intro }}</p>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
<span>{{ d.list[100].name }}</span>
<span>所在城市：{{ d.list[i].city }}</span>
{{# } }}
artTemplate 5KB 相比 laytpl 拥有更好的调错机制, 支持 include 语句和预编译, 也可以试一试小巧的Juicer
Template Error
<filename>
Render Error
<message>
Cannot read property 'name' of undefined
<source>
<span>{{ value1.name }}</span>
SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。
网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！
从此无需网上苦苦寻觅特效，无需加载n个插件，无需害怕代码冲突，你需要的只是一个SuperSlide！
还可以多个SuperSlide组合创造更多效果哦~
很久之前我也是一个网站新手，在制作网页过程中，经常需要用到各种特效，于是到网上找合适的插件。找到后要熟悉它的参数、用法等，如果用到几种不同特效，就要找几个不同插件，结果页面代码臃肿，加载缓慢，还要害怕会不会冲突！实在痛苦。
于是我就想可不可以将多个特效合一，以后只需要调用一个插件就能实现网页大部分特效。经过千锤百炼后一个能实现各种效果的插件就浮出水面了，为了表示其异于常人的能力，我给它起了一个霸气的名字 -- SuperSlide！
弹窗 layer alert, confirm, prompt, msg, load, tips, iframe(window) 还有移动设备版本
lightgallery lightbox gallery plugin for jQuery
WxMoment 是由微信朋友圈广告团队面向广告详情页开发者提供的一个 JavaScript 库
通过使用 WxMoment，开发者可以简单的实现详情页中的常见功能，例如：微信分享、横屏提示、网页统计等。
资源预加载
滑屏组件 PagerSlider
移动端滑屏组件，支持上下滑动，左右滑动
支持 dom 绑定动画
锁定禁止滑动
记住页面索引
翻页时，页面元素动画只执行一次
内容超出一屏先滚完再翻页
第一次向下/向上滑时不触发翻页，第二次时再翻页
is.js Check types, regexps, presence, time
SimpleStateManager
A responsive state manager which allows you to run different javascript at different browser widths
enquire.js programmatically responding to media queries.
build websites with objects
EventEmitter
Evented JavaScript for the browser
jquery-bridget
makes a jQuery plugin out of a constructor
director
a tiny and isomorphic URL router
Layzr.js
dependency-free library for lazy loading img or iframe, 2kb
jquery_lazyload
unveil.js
A very lightweight jQuery|Zepto plugin to lazy load images, with retina displays - less than 1k.
LazyLoad
Echo.js
Echo is a standalone JavaScript lazy-loading image micro-library. Echo is fast, 2KB, and uses HTML5 data-* attributes for simple.
Hammer.js
recognize gestures made by touch, mouse and pointerEvents. It doesn't have any dependencies
store.js
localStorage wrapper for all browsers without using cookies or flash. Uses localStorage, globalStorage, and userData behavior under the hood
A finite state machine javascript micro framework
AlloyTeam/AlloyFinger super tiny size multi-touch gestures library for the web
Popmotion
motion engine. Make it pop with animation, physics, and input tracking.
Velocity
an animation engine with the same API as jQuery's $.animate().
It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.
TweenLite, TimelineLite, TweenMax, TimelineMax, Draggable and SplitText, 早在 flash 时代就已经称霸动画界了
Tweene
Tweene is an animation proxy: used as a wrapper of your chosen library, it may allow you to
write animations easily, thanks to its versatile interface that adapts itself to your programming style
gain extra features (play, pause, reverse, resume, restart and speed control, Timelines)
switch easily from one library to another any time you want.
Shifty A teeny tiny tweening engine
var tweenable = new Tweenable();
var pre = document.querySelector('pre');
tweenable.tween({
from: { 'x': 0 },
to: { 'x': 10 },
duration: 1000,
step: function (state) {
pre.innerHTML += state.x + '\n';
finish: function (state) {
pre.innerHTML += 'Hooray, all done! Final value: ' + state.x;
});
tween.js Javascript tweening engine
var coords = { x: 0, y: 0 };
var tween = new TWEEN.Tween(coords)
.to({ x: 100, y: 100 }, 1000)
.onUpdate(function() {
console.log(this.x, this.y);
.start();
requestAnimationFrame(animate);
function animate(time) {
requestAnimationFrame(animate);
TWEEN.update(time);
Textillate 实现文字动画效果, 例如打字机效果
anime.js works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.
lining.js 可以控制每一行文字的样式, 并可以使用动画, 让文字一行行显示出来
这里的还未整理分类
jquery-fracs
determines some fractions for an HTML element (visible fraction, fraction of the viewport, ...) and also provides the coordinates of these areas. As a bonus there is a page outline feature as seen on the right.
Draggabilly
Make that shiz draggable
Horizontal D&D
Vertical D&D
Multiline D&D
Set draggable child area:
Droppable areas
tabulous.js
A jQuery tabs module for todays web!
Covering-Bad
A simple jQuery Plugin for cover an item by another item with dragging ability
Sequence
Responsive animation framework for creating unique sliders, presentations, banners, and other step-based applications
iNotify JS achieve the browser title flashing , scrolling, voice prompts , browser notice.
Bootstrap Notify turns standard Bootstrap alerts into "Growl-like" notifications.
侧边栏菜单, app上流行的UI模式
Slideout
A touch slideout navigation menu for your mobile web apps.
jQuery.Stacky
create UIs with panels that open horizontally using jQuery.
jQuery.mmenu app look-alike on- and off-canvas menus with sliding submenus for your website and webapp
AppScroll
a tiny JS library that fixes the "website dragging" issue caused on iDevices
recorder
Using Capture API (HTML5) to capture video / photo via the camera of your device.
D3.js 数据可视化, 自定义图形
web based file manager
桌面, 文件管理, 代码编辑器, 文件预览、编辑、上传下载、在线解压缩、音乐视频播放
interact.js
drag and drop, resizing and multi-touch gestures
Dragging
Drag and drop
Snapping
Resizing
Multi-touch Rotation
Pinch-to-zoom
Use in SVG files
Tap, doubletap and hold
fabric.js 比较适合 PC 端, 功能强大
a powerful and simple Javascript HTML5 canvas library.
You can then scale, move, and rotate these objects with the mouse
Snap.svg
图片裁剪 http://odyniec.net/projects/imgareaselect/
音乐播放器 flash
http://www.schillmania.com/projects/soundmanager2
smoothState.js
Unobtrusive page transitions with jQuery
SlipHover
SlipHover apply direction aware hover animation for the caption of an image.
vTicker
BreakingNews – jQuery间歇滚动插件
SlotMachine
SlotMachine 是一个基于 jQuery 的插件，它能够制作类似老虎机的效果
An automatic web page progress bar.
MixItUp animated filtering and sorting
Split.js adjustable split views
Font Awesome
Load Awesome
yue.css
a typography stylesheet for readable content
Fonts.css
跨平台 CSS 中文字体解决方案
一直以来跨平台的中文字体 CSS 设置都是一件让人很头疼的事情，这个库打包了一些常见字体的名字(例如黑体, 楷体, 宋体, 仿宋, 明体)，希望能覆盖 Windows、Mac 以及 Linux 的常见字体，方便引用
i18next internationalization library for browser or any other javascript environment (eg. node.js).
translater.js 利用HTML注释来翻译页面的解决方案
Globalize internationalization and localization that leverages the official Unicode CLDR JSON data
Open color Color scheme for UI design
ProgressBar.js Responsive and slick progress bars with animated SVG paths.
one-page-nav
Smooth scrolling and smart navigation when user scrolls on one-page sites.
http://www.zcool.com.cn/special/znote2014/
stickUp sticky navigation menus.
One Page Scroll
one page scroll website that allows users to scroll one page at a time. It is perfect for creating a website in which you want to present something to the viewers.
scrollReveal.js
Easily reveal elements as they enter the viewport. 最方便使用, 无需依赖动画样式(例如 animate.css)
var sr = ScrollReveal({
origin: 'top', // translate 的方向
distance: '100px', // translate 的距离, 还有 rotate, opacity, scale 都是指初始化时元素怎么变形
// 例如: transform: translateY(-100px) scale(0.9) rotateX(20deg) rotateY(30deg);
viewFactor: 0.2, // 判断元素多少百分比出现在视野中则认为元素是显示出来了
reset: true // 重复触发动画
});
sr.reveal('[data-animate]');
Animate
trigger animations on elements when they are within the viewport, 方便配合动画样式(例如 animate.css)使用, 与WOW.js 类似
// <div data-animate data-animation-classes="fadeInLeft animated" data-animation-reverse="true" data-animation-offset="0.1, 0.5" data-animation-delay="0"></div>
// 只监听了 window 上的 scroll 事件
var animate = new Animate({
offset: [0.5, 0.5], // 元素在垂直和水平方向上有多少百分比的内容出现在视野中才触发动画
reverse: true // 再次出现在视野中时又会触发动画
});
animate.init();
ScrollWatch
Easily add lazy loading, infinite scrolling, or any other dynamic interaction based on scroll position (with no dependencies). 类似的有 VisSense, Waypoints
Watch any scrolling element, not just the window
Executes callbacks when elements enter/leave view
Tracks the first time something enters/leaves view or every time
Watches vertical and horizontal scrolling
Supports infinite scrolling out of the box
Scroll/Resize handlers are throttled or debounced, so your cpu lives to see tomorrow
new ScrollWatch({
watch: '.element',
watchOffset: -200, // 正数表示滚动位置距离元素显示还差多少, 负数表示滚动位置超过元素多少
watchOnce: false,
onElementInView: function(event) {
$(event.el).addClass('active');
onElementOutOfView: function(event) {
$(event.el).removeClass('active');
});
VisSense
observing visibility changes of DOM elements. Immediately know when an element becomes hidden, partly visible or fully visible.
var nodeList = document.querySelectorAll('[data-animate]');
for (var i = 0, length = nodeList.length; i < length; i++) {
var visibility_monitor = VisSense(nodeList[i], {
fullyvisible: 0.1 // 元素多少百分比显示出来则认为元素为全显示了
}).monitor({
fullyvisible: function(visMon) {
var classList = visMon._visobj._element.getAttribute('data-animation-classes').split(' ');
classList.forEach(function(clazz) {
visMon._visobj._element.classList.add(clazz);
});
hidden: function(visMon) {
var classList = visMon._visobj._element.getAttribute('data-animation-classes').split(' ');
classList.forEach(function(clazz) {
visMon._visobj._element.classList.remove(clazz);
});
}).start();
ScrollMagic
animate based on scroll position
jquery-smoove
scrolling effects using CSS3
scrollme
adding simple scrolling effects to web pages.
multiscroll
A simple plugin to create multi scrolling websites with two vertical scrolling panels.
jQuery.scrollIntoView
When a DIV is scrolled into or out of the visible part of browser it executes a function.
jQuery.Pin
Make your stuff stick
pagePiling.js
create beautiful fullscreen scrolling websites
AniJS Raise your Web Design without Coding
data-anijs="if: click, do: flipInY, to: .container-box" 比较适合滚动到页面某个元素时才显示动画
Headroom.js Hide your header until you need it
cta.js animate any element ("action") onto any other element ("effect") on the page.
roll.js keep track of position, scrolling, and pagination.
jquery.scrollTo animated scrolling
wScratchPad 刮刮卡
lucky-card 刮刮卡
fruit-slot 经典水果机和其他可供参考的抽奖活动
iSlider
可用于幻灯片(可手势缩放), 滑动组件(图片或者DOM元素, 可实现滑动tab页), 支持水平或垂直滑动, 可用于做单页的活动推广页
Responsive/CSS3/Swipe/Desktop mouse dragging
Infinite looping/Add, remove, filter & unfilter slides
Autoplay, dots, arrows, callbacks
不支持垂直滑动
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
Responsive
Horizontal, vertical
Slides can contain images, video, or HTML content
Advanced touch / swipe support built-in
Uses CSS transitions for slide animation (native hardware acceleration!)
Flux-Slider
支持很多动画效果
simple-jQuery-slider
Simple jQuery CSS3 slider. Simple to use and supports every browser! (IE7+)
Dragdealer
Drag-based JavaScript component, embracing endless UI solutions
2d dragging and tapping, mouse and touch, ~12KB. No dependency.
可以通过这个drag解决方案实现多种组件效果: slider, scroller, slide to unlock, carousel, zoom
skippr
A super simple slideshow plugin for jQuery.
ResponsiveSlides
Simple & lightweight responsive slider plugin (in 1kb)
Pogo Slider
很多Slide Transitions和Element Animations
All-In-One Banner
multiple effects, animated text
Swipe 简单
lightslider lightweight responsive Content slider with carousel thumbnails navigation
Pikaday No dependencies Datepicker
flatpickr datetime picker
pickadate mobile-friendly, responsive, jQuery date & time input picker
multi-select 双 select 左右选择
selectbox 糖饼 select
Chosen making long, unwieldy select boxes more user friendly
Select2
Awesomplete autocomplete with zero dependencies
Switchery
iOS 7 style switches for your checkboxes
Brute Select
Simple select implementation with customizable styles. It retains default browser behavior for dropdown list itself while making possible adjusting all aspects of collapsed view of select.
Selectize
custom <select> UI control. It's useful for tagging, contact lists, country selectors
Bootstrap Switch
Turn checkboxes and radio buttons in toggle switches.
webuploader
以HTML5为主，FLASH为辅的现代文件上传组件
rangeslider
Simple, small and fast JavaScript/jQuery polyfill for the HTML5 slider element.
Color Picker Photoshop-like interface
Spectrum The No Hassle JavaScript Colorpicker
jquery_chained
Chained Selects for jQuery and Zepto.
Simditor
富文本编辑器, 出自彩程设计, 还有其他表单组件
wangEditor 还有移动版
editor.md markdown 编辑器
jQuery Form
unobtrusively upgrade HTML forms to use AJAX
jQuery-Knob touchable, jQuery dial
validform
jQuery-Form-Validator
cleave.js Format input text content when you are typing
Fuse Lightweight fuzzy-search
var options = {
keys: ['title', 'author.firstName']
var fuse = new Fuse(books, options);
fuse.search('old');
dropload 移动端下拉刷新、上拉加载更多插件
AlloyTeam/AlloyTouch 触摸运动
iScroll
主要用于移动端的Web App
xscroll Taobao FED
custom scrollbar plugin
Highly customizable custom scrollbar jQuery plugin, featuring vertical/horizontal scrollbars, scrolling momentum, mouse-wheel, keyboard and touch support etc.
ScrollUp
create a customisable 'Scroll to top' feature that will work with any website
stickOnScroll
Making elements fixed on the top of the page when scrolling and scrolling that item up when it a specified footer element gets "close".
Freewall
create many types of grid layouts: flexible layouts, images layouts, nested grid layouts, metro style layouts, pinterest like layouts.
infinity
speeds up scrolling through long lists and keeps your infinite feeds smooth and stable
折线/柱状/饼图/雷达/散点/混合
拓扑图(树形图)
progress进度图表
力导向布局图
温度计图占比/扇形一维比例图/标签星系图/多触点关联图/环形关联图/等比流失图/流入流出关系图
ECharts
图形类型非常非常丰富 Why ECharts?
Chart.js All six core chart types are only 11.01kb when minified
jsPlumb Visual connectivity
Kity Minder 百度脑图
Qunee 拓扑图
JointJS visualization and interaction with diagrams and graphs.
基于百度地图的大数据可视化开源库，可以用来展示大量的点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据
my-mind Online Mindmapping Software
vis network 关系图
DataTables
jQuery Bootgrid
angular-masonry
Static brick issue
如何hack静态元素与动态元素一起组成瀑布流时带来的bug
isotope
Filter & sort magical layouts
Packery
Bin-packing layout library
salvattore
A jQuery Masonry alternative with CSS-driven configuration.
Gridster.js
makes building intuitive draggable layouts from elements spanning multiple columns
gridstack.js
for widget layout. This is drag-and-drop multi-column grid.
Shapeshift
A dynamic grid system with drag and drop functionality.
Dragula
Drag and drop so simple it hurts
AmplifyJS jStorage 可以淘汰了
AmplifyJS is a set of components designed to solve common web application problems with a simplistic API.
AmplifyJS solves the following problems:
Ajax Request Management - amplify.request
Client Side Component Communication - amplify.publish/subscribe
Client Side Browser & Mobile Device Storage - amplify.store
http://sentsin.com/
http://www.layui.com/
http://prinzhorn.github.io/skrollr/
The premier 360° solution
Parallax
Parallax Engine that reacts to the orientation of a smart device
Modernizr
detects HTML5 and CSS3 features in the user’s browser
FitText
FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.
fontflex
Spritely
animating CSS sprites and dynamic scrolling backgrounds
qslider http://ued.qunar.com/
QSlider是轻量级, 无任何插件依赖的手机平台javascript滑动组件, 专门为Touch端宣传类专题所开发的解决方案
支持循环效果, 水平/垂直滑动
做出类似这样的专题页面: http://ued.qunar.com/qnext/6/index.html
Hilo 阿里巴巴集团开发的一款跨终端的互动小游戏解决方案。案例丰富，框架成熟，已经经历多届阿里巴巴双十一，年中大促互动营销活动考验
Stage.js 2D HTML5 game development
stats.js JavaScript Performance Monitor
CreateJS EaselJS/TweenJS/SoundJS/PreloadJS
Kiwi.js 和 Phaser 好像
PlayCanvas 3D 游戏/编辑器
Quintus 和Crafty有点像
白鹭 复杂游戏开发, 有 IDE 及其他工具辅组
lufylegend 仿ActionScript3.0的语法
Flash2x 支持Flash项目到HTML5项目或App的跨平台高效转换工具
Proton 粒子效果
The High Velocity Web Framework For Java and Scala
相当于Java界的rails
Build cross platform desktop apps with web technologies
Electron
node-webkit
Arale 一个开放、简单、易用的前端基础类库
http://animajs.org/#standard/
从CDN中搜集各种js/css框架找到合适的
CODYHOUSE
A free library of HTML, CSS, JS nuggets
YOU MIGHT NOT NEED JQUERY PLUGINS
Vanilla List: The Vanilla Javascript Repository
TODO 整理 Android 端和 iOS 端常用的库