2012年回顾：100个优秀jQuery插件精选

Sponsor

在2012年里出现了很多很棒的jQuery插件，如结合CSS3的jQuery动画、强大的支持多设备浏览的响应性布局设计、使用视频作为网页设计背景、jQuery图像幻灯插件、导航、表格、表单以及像Pinterest布局等等，今天设计达人将为大家收集2012年度优秀jQuery插件精选，有100多个并又分类好，网页设计师和前端开发人员都请勿错过哦！

• jQuery 视频动画系列插件
• 图像相册幻灯片系列插件
• 图像放大jQuery插件
• 图像与文字相关的jQuery插件
• 背景图像相关的jQuery插件
• 图文切换的幻灯片插件
• 菜单导航相关的jQuery插件
• 设计布局相关的jQuery插件
• 响应性（自适应）jQuery插件
• 面板相关
• Tool tips提示相关系列
• 与动画相关的jQuery插件
• 模糊及其它动画特效
• 滚动、视差特效的jQuery插件
• 列表相关
• Table表格相关
• 表单相关插件
• 文字文本相关jQuery插件
• 载入加载相关的jQuery插件
• 元素内容
• 其它jQuery插件

jQuery 视频动画系列插件

BigVideo.js

BigVIdeo JS是一个支持MP4视频作为整个网页背景的jQuery插件。

Video Background

这个HTML5视频背景jQuery插件，如果网页不支持HTML5视频将会用图片来代替作为背景。

tubular

可以把YouTube视频作为网页背景

videoBG

这个jQuery视频插件，除了能放把视频作为整个页面的背景外，还能放到独立的DIV容器里面，具体请看里面的Demo

Allofthelight.js

支持关灯效果的jQuery视频插件。

图像相册幻灯片系列插件

Gamma Gallery

这是一个响应性布局的JQuery图像插件。

Cycle2

有多种过渡效果（图片切换效果）的幻灯片jQuery插件。

Blueberry

简单的幻灯片切换插件，使用响应性布局设计。

jq-tiles

这个jQuery幻灯片切换效果不错。

RSlider

一个全屏背景的幻灯片jQuery插件，使用了响应性布局设计。

Really Simple Slideshow

超级简单的幻灯片图片切换。

图像放大jQuery插件

Fresco

这个jQuery图像插件有点像Light Box效果，支持图像、视频、多图切换，很不错，喜欢的试试吧。

Zoom

这个jQuery图像插件有两种放大模式，包括onmousehover 和 onmousedown。

jquery.snipe

像使用放大镜查看一样的图像放大效果。

mlens

和上面介绍的差不多，自己打开看吧。

图像与文字相关的jQuery插件

Baseline

让图像与基线对齐，如图，左图是默认不对齐的，右图是对齐后的效果。

lenticular.js

不错的动画切换效果，具体请看例子，很棒的哦。

NailThumb

可以按比例生成图文缩略图。

JZoopraxiscope

使用静态图像生成的动画，类似设计达人前面所讲的文章：利用CSS Sprite实现PNG图片动画

背景图像相关的jQuery插件

bgStretcher

全屏幻灯片背景jQuery插件，有多种切换方式。

Anystretch

可以调整适应容器尺寸的背景图像

图文切换的幻灯片插件

Sly

支持水平和垂直方向切换，支持拖动滑动条。

RefineSlide

3D效果的图片切换特效。

iView

这个切换效果很不错。

Evo Slider

多种不同的幻灯片切换，如焦点图效果、手风琴效果。

iosSlider

这个jQuery幻灯片插件的特别之处就是支持iPad等移动设备触摸屏设备。

Superslides

一个轻量级的全屏大图背景切换幻灯片jQuery插件。

Casual Slider

只有4KB的轻量级文字切换插件。（网站之前还能访问，刚再次访问一下好像打不开了>.<）

ayaSlider

这个幻灯片jQuery插件的文字切换效果不错，而且还有进度条查看图片切换时间。

菜单导航相关的jQuery插件

Stairway

菜单动画效果不错。

HorizontalNav

优化了的水平导航插件，菜单尺寸自动适应导航区域。

jPanelMenu

下拉导航jQuery插件。

TinyNavi

如果你要设计响应性布局的网站，哪么这个导航插件就适合你了，当在小分辨率的设备下，菜单自己变成select下拉选择菜单。

BoxyMenu

带动画的盒子导航，效果自己看啊，很难解释……

jQSimpleMenu

带动画效果的多级菜单jQuery插件。

设计布局相关的jQuery插件

Grid-A-Licious

流布局jQuery插件，不同分辨率切换的时候会带动画效果哦。

Wookmark

使用简单脚本写的流布局jQuery插件。

Shapeshift

不错的jQuery流布局插件，切换带动画效果，特别之处就是可以拖动改变容器位置。

gridster

和上面的jQuery流布局插件差不多，也是支持拖动来改变布局。

BlocksIt.js

这个jQuery流布局插件不同的地方就是内容会随机展示。

Socialist

一个Pinterest布局风格的RSS插件。

stalactite

有延迟加载效果的流局插件。

grrrid

可以调整DIV高度以对齐网格。

equalize.js

让容器尺寸一至，以达到对齐显示效果。

响应性（自适应）jQuery插件

Responsive IFrames

让iFrame也支持自适应宽度（响应性布局）

Responsive Content

优化内容显示的响应性jQuery插件。

imgLiquid

图片会根据容器大小而自动缩放。

Responsive Img

和上面一样，图像会根据容器大小而自动缩放。

A jQuery Picture

根据屏幕大小，显示适合分辨率的图像。

RWD Image Maps

根据屏幕大小，自动计算图像坐标和大小自适应。

Responsive Measure

响应性文字插件：可以自定各个标签的字体大小。

Breakpoints.js

根据自定的屏幕大小来实行响应性布局。

面板相关

Baraja

多种面板排列风格。

Windy

有枯叶飘落的动画面板，很漂亮。

ContentHover

HOVER面板效果。

Kwicks

容器自动伸缩效果。

Backbone.Notifier

不同类型的通知面板。

noty

通知面板（tool tips）插件。

Avgrund Modal.

比较好玩的提示面板。

Tool tips提示相关系列

PowerTip

支持调整不同提示位置的插件。

qTip2

丰富的top tips揭示风格。

Tooltipster

轻量级的tool tips提示工具。

gips

tool tips提示工具，可以设置提示的位置和时间。

iPicture

图订式tool tips提示插件。

Mobile-Friendly Tooltip

最适合移动设备上使用的tooltips jQuery提示插件。

jQuery News Ticker

新闻式的jQuery提示插件。

与动画相关的jQuery插件

Champagne

内容随机显示。

Real Shadow

逼真的阴影。

jQuery Transit

jQuery与CSS3实现的动画效果。

cssAnimate

jQuery和CSS3组合，实现页面渐变过渡动画效果。

approach

根据鼠标位置显示不同大小。

JSTween

简单描述CSS3动画。

Glisse.js

结合CSS3制作的画廊。

Wiggle

一个有趣的jQuery插件，它可以把图标像iphone图标一样晃动起来。

Adipoli

悬停在图像时的动画效果展示。

Rotating Image

图像旋转动画。

Roundabout

多种图像环绕旋转动画，有几个很不错。

GFX

点击图像，展示动画。

fc.tape

适合商品展示动画，使用多个图片连成的动画。

jsMovie

jQuery片图像动画，也是用多个图片连成的。

Motio

一个基于CSS Sprite制作的动画，可以设置FPS值。

模糊及其它动画特效

jGravity

根据重力而变动的特效……

jqFloat.js

一个很好玩的jQuery Float特效插件，可以让元素可爱的浮动起来。

Foggy

指定某些元素变得模糊起来。

blur.js

就WIN 7 哪个背景磨砂效果。使背景图像有磨砂的感觉。

jQuery Shadow

阴影类的jQuery插件。

Makisu

创意的竹廉动画效果，很漂亮吧。

pep

惯性拖动效果，可以在台式机和移动设备上使用。

PFold

折叠纸效果。

oriDomi

BoolBlock

一个翻书效果。

滚动、视差特效的jQuery插件

SuperScrollorama

各种各样的视差动画，淡入淡出的动画~

Ascensor

矩阵式滑动。

jmpress.js

像幻灯片一样的动画，以圆形方式展示。

Jarallax

使用jarallax，可以很容易就能实现视差效果。

Scroll Path

根据路径来滑动的jQuery滑动插件。

PageSlide

页面侧边栏jQuery插件。

Curtain.js

视差滑动插件。

StickyMojo

类似使用描链接的滑动插件。

Stick ’em

可以指定容器滑动到XX像素后因定显示，像设计达人的右边一样，但他的展示方式还是有点不同，大家请看看DEMO。

Infinite Scroll

可以让你的页面内容无刷新加载，而不需要点击下一页，像花瓣、Pinterest首页一样，屏幕滚动到差不多最后的时候，就会自动加载下一页的内容。

NiceScroll

这个Scroll插件不同的是有惯性滑动效果。

nanoScroller

小尺寸的Scroll bar滚动栏。

列表相关

Any List Scroller

左右滑动列表，比较适合产品展示。

Sticky Slidebar

滑动导航列表，可以让导航根据屏幕滑动而滑动。

Nestable

方便的树目录调整插件，比wordpress内置哪个菜单还要好用。

Table表格相关

tablecloth

精美的表格插件，多种漂亮的Table表格样式。

Scrolite

可以让表格滑动，具体我没试过 ，大家自己看Demo.

FooTable

一个像响应性一样的表格插件，可以让你的Table表格在移动设备上也能有着良好的展示效果。

Filters

具有过滤功能的列表插件。

表单相关插件

Garlic.js

这个jQuery插件可以让本地保存表单的数据。

Ideal Forms

一个响应性布局设计的表单。

SeacrhMeme

一个伸缩动画的搜索插件。

gauge.js

带动画效果的统计表插件。

Zebra

轻量级的日期插件。

Smart Time Ago

智能显示时间的jQuery插件，比如”8小时以前”.

Complexify

能显示密码安全度的插件。

文字文本相关jQuery插件

trunk8

当然文字超过内容区域的时候，会自动多出Read more按钮。

Typist

这个Typist jQuery插件能把文字像打字机一样展示出来，还支持换行、暂停操作哦。

Lettering Animate

动画文字效果。

Bacon

文字环绕插件，像微软word文档的图像环绕功能。

TypeButter

一个可以调整不同字体的字体间距插件。

MagicNav

一个FAQ页面插件。

载入加载相关的jQuery插件

mobile.lazyloader

可以延迟加载服务器资源。

Lazy Load Script

可以指定时间或延迟时间加进外部JS

timing

可以定时执行脚本。

Percentage Loader

带动画效果读取百分比的jQuery插件。

元素内容

Koottam

统一社会化媒体的风格样式。

floatShare

浮动的社会化按钮。

Pageguide

CSS3动画引导页。

Joyride

也是一个动画引导效果插件。

Easy Pie Chart

可以让你简单创建各种拼图样式设计。

jPages

可以把内容分成多页展示？

Pagify.js

这个jQuery插件可以让一个网站的页面以渐变动画形式切换。DEMO

Gantt

一个让你方便创建甘特图的jQuery插件，我想做大项目的朋友一定经常使用了。

其它jQuery插件

jQuery URL parser

URL地址解析插件。

jquery-url

轻量级的URL地址解析插件。

Hammer.js

一个可以解析你的鼠标动作插件。

IE Alert

IE6/7/8的提示框专用JS，如果用户使用了底版本的IE浏览器，就会自动弹出这个提示框。

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。