一套基于 CSS3 的鼠标悬停效果和动画，这些可以非常轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签，必要的时候使用 before 和 after 伪元素。因为使用了 CSS3 过渡、转换和动画效果，因此只支持 Chrome、Firefox 和 Safari 等现代浏览器。

演示：http://ianlunn.github.io/Hover/

文档：http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/

imagesloaded https://github.com/desandro/imagesloaded

一款用于检测页面中的图片是否被加载的js插件。非常有用的插件，当你的页面中某幅图片没有被加载时，默认会显示一个红叉或图片alt文本，imagesLoaded可以将未加载的图片替换为你设置的图片。

演示：http://imagesloaded.desandro.com/

文档：http://imagesloaded.desandro.com/

isotope https://github.com/metafizzy/isotope

一个jQuery的插件，用来实现精美的动态元素布局。

演示：http://isotope.metafizzy.co/

文档：http://isotope.metafizzy.co/options.html

smartmenus https://github.com/vadikom/smartmenus

多级菜单

演示：http://www.smartmenus.org/

文档: http://www.smartmenus.org/docs/

scrollreveal.js https://github.com/jlmakes/scrollreveal.js

和 WOW.js 一样，scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；WOW.js 依赖 animate.css，而 scrollReveal.js 不依赖其他任何文件。虽然 scrollReveal.js 不依赖 animate.css，但它的动画也是用 CSS3 创建的，所以它不支持 IE10 以下的浏览器。

IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果，并且因为不支持一些属性或方法会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

演示: https://scrollrevealjs.org/

video.js https://github.com/videojs/video.js

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。

演示: http://videojs.com/

bigvideo https://github.com/dfcb/BigVideo.js

一个 jQuery 视频插件，能让用户很方便将视频作为网站的背景。它可以播放一个无声视频（或一系列视频），或者像播放器一样提供一个视频列表给用户，让他们选择喜欢的进行播放。这个插件基于 Video.js 构建。此外如果有些设备不支持自动播放则转换成用图片来显示。这款插件要求 jQuery UI（滑块控制）和 jQuery 图像加载插件。

Modernizr https://github.com/Modernizr/Modernizr

用于检测用户浏览器的 HTML5 与 CSS3 特性，使用炫酷新颖的 web 技术是一件很有趣的事情，但你不得不面对落后的浏览器。Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。

文档：https://modernizr.com/docs

html5shiv https://github.com/aFarkas/html5shiv

越来越多的站点开始使用 HTML5 标签。但情况是还有很多人在使用IE6，IE7，IE8。为了让所有网站浏览者都能正常的访问网站，

完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法。

Respond.js https://github.com/scottjehl/Respond

一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计（Responsive Web Design）。

Responsive https://github.com/ResponsiveBP/Responsive

简单来说就是可以根据浏览器的状态做出响应。响应包括对视窗大小的反应，根据你设备是否支持触摸事件或地理定位功能来决定是否显示特定内容，不一而足。

文档：http://responsivebp.com/getting-started/

es5-shim https://github.com/es-shims/es5-shim

ES5里这些处理数组的新方法，在IE6-IE8浏览器还未得到支持，所以我们需要在IE这些低版本浏览器中引入这个es5-shim补丁，这样我们就可以使用它了。

ie8 https://github.com/WebReflection/ie8

兼容IE8

addEventListener, removeEventListener, and dispatchEvent for IE8 including custom bubbling events
timeStamp, cancelable, bubbles, target, and currentTarget properties per each event
document.createEvent('Event') standard API with e.initEvent(type, bubbles, cancelable) supported too
preventDefault(), stopPropagation(), stopImmediatePropagation() working with both synthetic and real events
document.addEventListener('DOMContentLoaded', callback, false) supported
textContent, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling, childElementCount
document.defaultView, window.getComputedStyle

json3 https://github.com/bestiejs/json3

个现代JSON实现库，能够兼容各种各样的Javascript平台，比如IE6、Opera7、Safari2及Netscape6等。当前最新的版本是3.3.2。

jquery-placeholder https://github.com/mathiasbynens/jquery-placeholder

现在都是HTML5时代了,所有的浏览器都支持placeholder,唯独IE不支持。现在我们有了这款插件,IE下终于可以支持了!

演示：https://mathiasbynens.github.io/jquery-placeholder/

文档：https://mathiasbynens.github.io/jquery-placeholder/

css3-mediaqueries.js https://github.com/livingston/css3-mediaqueries-js

解决IE8及以下版本浏览器不支持 CSS3 media queries 的问题的。

webuploader https://github.com/fex-team/webuploader

由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。

jQuery-File-Upload https://github.com/blueimp/jQuery-File-Upload

jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。

jQuery File Upload有多个文件选择，拖放上传控件拖放支持，进度条，验证和预览图像，音频和视频。

支持跨域，分块和可恢复的文件上传和客户端图像大小调整。适用于任何服务器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.），支持标准的HTML表单文件上传。

演示: https://blueimp.github.io/jQuery-File-Upload/index.html

noUiSlider https://github.com/leongersen/noUiSlider

一款小巧的范围滑块插件，它能很轻松的制作出类似 HTML5 中 type=”range” 的效果，甚至是更强大的效果。它可以制作横向和种纵向的滑块，甚至是两个滑块选取某一段范围，noUiSlider 的数值可以精确到小数点后一位或后两位。

noUiSlider 兼容 Firefox、Chrome、Opera、Safari 和 IE7+ 浏览器，其实也兼容 IE6，只是样式上有点小问题。

演示：http://refreshless.com/nouislider/

elevatezoom https://github.com/elevateweb/elevatezoom

商城常用功能，幻灯片鼠标移动区域放大。

演示：http://www.elevateweb.co.uk/image-zoom/examples

文档：http://www.elevateweb.co.uk/image-zoom/configuration

raty https://github.com/wbotelhos/raty

一个很棒的jquery评分插件

jQuery Easing https://github.com/gdsmith/jquery.easing

一款比较老的jQuery插件，在很多网站都有应用，尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧，且有多种动画方案供选择，使用简单，而且免费。

TouchSwipe https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

一个 jQuery 用于处理触摸事件的插件，主要用于 iPad 和 iPhone 之类的设备。

Shuffle https://github.com/Vestride/Shuffle

一款基于jquery的流模式布局的分类排序和筛选插件应用-Shuffle，动画效果非常强大，插件简单易用，参数设置灵活。

演示：https://vestride.github.io/Shuffle/

lightGallery https://github.com/sachinchoolur/lightGallery

一款可显示图像和视频的轻量级的灯箱画廊jquery插件,lightgallery具有非常动感的动画效果，在网页上它只是显示一个图片的列表，当用鼠标点击后便弹出全屏窗口，图片以幻灯片的形式切换，正下方的按钮可切换出图片画廊，可快速切换到目标图片，当然，把图片换成视频照样能用。

演示：http://sachinchoolur.github.io/lightGallery/demos/

Stellar.js https://github.com/markdalgleish/stellar.js

一个 jQuery插件，能很容易地给网站添加视差滚动效果。尽管已经停止了维护，但它非常稳定，与最新版本的jQuery兼容，很多开发者也在使用它。这个插件在jQuery插件库里很流行，你可能早已听说过了。

演示：http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html

icheck https://github.com/fronteed/iCheck/

一款对checkbox的美化插件，支持几乎所有浏览器包括移动浏览器。

演示：http://icheck.fronteed.com/

jQuery.countdown https://github.com/hilios/jQuery.countdown

倒计时插件，电商做秒杀等场景。

演示：http://hilios.github.io/jQuery.countdown/examples.html

jQuery.Inputmask https://github.com/RobinHerbots/Inputmask

在我们开发中经常会对用户的输入进行控制，比如日期，货币格式，或者纯数字格式之类的限制，这就是input mask的使用场景，在项目中也是会经常被提及需的需求之一。

演示：http://robinherbots.github.io/Inputmask/

文档：https://github.com/RobinHerbots/Inputmask/wiki/Howto:-Effectively-using-the-data-inputmask-attribute

Counter-Up https://github.com/bfintal/Counter-Up

数字变化效果。

演示：http://bfintal.github.io/Counter-Up/demo/demo.html

jquery-validation https://github.com/jzaefferer/jquery-validation

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

演示：https://jqueryvalidation.org/files/demo/

Parsley.js https://github.com/guillaumepotier/Parsley.js/

一个用来对 Web 表单的输入数据进行验证的 JavaScript 库，无需另写一行 JavaScript 代码。

演示：http://parsleyjs.org/doc/examples.html

文档：http://parsleyjs.org/doc/index.html

waypoints https://github.com/imakewebthings/waypoints

一个 jQuery 用来实现捕获各种滚动事件的插件，例如实现无翻页的内容浏览，或者固定某个元素不让滚动等等。支持主流浏览器版本。

文档：http://imakewebthings.com/waypoints/

waitForImages https://github.com/alexanderdickson/waitForImages

图片加载监听库

mediaelement https://github.com/johndyer/mediaelement

一款非常优秀的html5播放器MediaElement.js，它不仅能够添加我们常用的html5视频格式（mp4,m4v,mov），而且还支持回退方式，即一些低版本的浏览器不支持HTML5播放可以采取flash的方式进行播放，从而达到支持绝大部分的浏览器。

演示：http://mediaelementjs.com/

文档：http://mediaelementjs.com/

dragula https://github.com/bevacqua/dragula

一个 JavaScript 库，实现了网页上的拖放功能。提供 JavaScript、AngularJS 和 React 版本。

演示：https://bevacqua.github.io/dragula/

文档：https://bevacqua.github.io/dragula/

spin.js https://github.com/fgnass/spin.js

一般都会利用一个动态的 Gif 小图片来制作一个Ajax Loading ，以便增加用户体验。

今天在网上发现了一个 Spin.js ，该 js 脚本压缩后5k，可以不用任何图片，任何外部的CSS样式，就可以创建一个Ajax Loading 指示器，且兼容以下浏览器：

Chrome
Safari 3.2+
Firefox 3.5+
IE 6,7,8,9,10,11
Opera 10.6+
Mobile Safari (iOS 3.1+)
Android 2.3+

演示：http://spin.js.org/

文档：http://spin.js.org/

Holder.js https://github.com/imsky/holder

html图片占位符插件holder.js可以为图片生成一个占位符图片也可以为某个区域生成一个占位符图片，准确的说应该是为某个区域生成一个占位符图片，因为img也可以看做是一个区域。

演示：http://holderjs.com/

toastr.js https://github.com/CodeSeven/toastr

一款非常棒的基于jquery库的非阻塞通知提示插件，toastr可设定四种通知模式：成功，出错，警告，提示，而提示窗口的位置，动画效果都可以通过能数来设置，在官方站可以通过勾选参数来生成JS，非常的方便使用。

演示：http://codeseven.github.io/toastr/demo.html

文档：http://codeseven.github.io/toastr/

Chartist.js https://github.com/gionkunz/chartist-js

简单的响应式图表，可以作为前端图表生成器。

演示：https://gionkunz.github.io/chartist-js/examples.html

文档：https://gionkunz.github.io/chartist-js/api-documentation.html

Switchery https://github.com/abpetkov/switchery

简单的 JavaScript 组件，只要几个简单的步骤就可以帮助用户把默认的 HTML 复选框转换成漂亮 iOS 7 样式风格。用户可以很方便的自定义这种转换，所以可以很好的配合你的设计风格。

支持的现代浏览器：Chrome, Firefox, Opera, Safari, IE8+。

演示：http://abpetkov.github.io/switchery/

文档：http://abpetkov.github.io/switchery/

Datatables https://github.com/DataTables/DataTables

一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

演示：https://www.datatables.net/examples/index

文档：https://www.datatables.net/manual/index

jquery.sparkline https://github.com/gwatts/jquery.sparkline

一个优秀 jQuery 插件，可以帮助用户在页面种生成静态或动态波谱图表效果。你可以在浏览器种使用HTML或者javascript调用实现。插件兼容目前绝大多数流行的浏览器： Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7, 8, 9 、 10。现在在手机端 iOS 和 Android.操作系统上也支持的很好。实现起来也很简单。用一句html或者javascript就可以实现你想要的效果了。

演示：http://omnipotent.net/jquery.sparkline/#s-about

文档：http://omnipotent.net/jquery.sparkline/#s-docs

highcharts https://github.com/highcharts/highcharts

一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

演示：http://www.highcharts.com/demo

文档：http://www.highcharts.com/docs

peity https://github.com/benpickles/peity/

一个jQuery插件它利用HTML5 <canvas>标签来创建微型图表（sparklines）。它支持柱状、线状和饼图，图的颜色、宽度、半径、分隔符都可以修改。当数据变化时，图形也立即重新生成。

文档：http://benpickles.github.io/peity/

purl https://github.com/allmarkedup/purl

用于解析URLs字符串。通过它我们可以方便地获取协议、主机、端口、查询参数、文件名、路径等等。在一些静态页面需要根据参数来调整一些内容的时候这个插件还是挺有用的。

dropzone https://github.com/enyo/dropzone