HTML & CSS » 2012年回顾:100个优秀jQuery插件精选

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

发表于: HTML & CSS, 优秀设计资源. 评论 (4)
Sponsor

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

jQuery 视频动画系列插件

BigVideo.js

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

100个优秀jQuery插件精选 - 设计达人

Video Background

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

100个优秀jQuery插件精选 - 设计达人

tubular

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

100个优秀jQuery插件精选 - 设计达人

videoBG

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

100个优秀jQuery插件精选 - 设计达人

Allofthelight.js

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

100个优秀jQuery插件精选 - 设计达人

图像相册幻灯片系列插件

Gamma Gallery

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

100个优秀jQuery插件精选 - 设计达人

Cycle2

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

100个优秀jQuery插件精选 - 设计达人

Blueberry

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

100个优秀jQuery插件精选 - 设计达人

jq-tiles

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

100个优秀jQuery插件精选 - 设计达人

RSlider

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

100个优秀jQuery插件精选 - 设计达人

Really Simple Slideshow

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

100个优秀jQuery插件精选 - 设计达人

图像放大jQuery插件

Fresco

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

100个优秀jQuery插件精选 - 设计达人

Zoom

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

100个优秀jQuery插件精选 - 设计达人

jquery.snipe

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

100个优秀jQuery插件精选 - 设计达人

mlens

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

100个优秀jQuery插件精选 - 设计达人

图像与文字相关的jQuery插件

Baseline

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

100个优秀jQuery插件精选 - 设计达人

lenticular.js

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

100个优秀jQuery插件精选 - 设计达人

NailThumb

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

100个优秀jQuery插件精选 - 设计达人

JZoopraxiscope

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

100个优秀jQuery插件精选 - 设计达人

背景图像相关的jQuery插件

bgStretcher

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

100个优秀jQuery插件精选 - 设计达人

Anystretch

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

100个优秀jQuery插件精选 - 设计达人

图文切换的幻灯片插件

Sly

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

100个优秀jQuery插件精选 - 设计达人

RefineSlide

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

100个优秀jQuery插件精选 - 设计达人

iView

这个切换效果很不错。

100个优秀jQuery插件精选 - 设计达人

Evo Slider

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

100个优秀jQuery插件精选 - 设计达人

iosSlider

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

100个优秀jQuery插件精选 - 设计达人

Superslides

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

100个优秀jQuery插件精选 - 设计达人

Casual Slider

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

100个优秀jQuery插件精选 - 设计达人

ayaSlider

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

100个优秀jQuery插件精选 - 设计达人

菜单导航相关的jQuery插件

Stairway

菜单动画效果不错。

100个优秀jQuery插件精选 - 设计达人

HorizontalNav

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

100个优秀jQuery插件精选 - 设计达人

jPanelMenu

下拉导航jQuery插件。

100个优秀jQuery插件精选 - 设计达人

TinyNavi

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

100个优秀jQuery插件精选 - 设计达人

BoxyMenu

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

100个优秀jQuery插件精选 - 设计达人

jQSimpleMenu

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

100个优秀jQuery插件精选 - 设计达人

设计布局相关的jQuery插件

Grid-A-Licious

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

100个优秀jQuery插件精选 - 设计达人

Wookmark

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

100个优秀jQuery插件精选 - 设计达人

Shapeshift

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

100个优秀jQuery插件精选 - 设计达人

gridster

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

100个优秀jQuery插件精选 - 设计达人

BlocksIt.js

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

100个优秀jQuery插件精选 - 设计达人

Socialist

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

100个优秀jQuery插件精选 - 设计达人

stalactite

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

100个优秀jQuery插件精选 - 设计达人

grrrid

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

100个优秀jQuery插件精选 - 设计达人

equalize.js

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

100个优秀jQuery插件精选 - 设计达人

响应性(自适应)jQuery插件

Responsive IFrames

让iFrame也支持自适应宽度(响应性布局)

100个优秀jQuery插件精选 - 设计达人

Responsive Content

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

100个优秀jQuery插件精选 - 设计达人

imgLiquid

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

100个优秀jQuery插件精选 - 设计达人

Responsive Img

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

100个优秀jQuery插件精选 - 设计达人

A jQuery Picture

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

100个优秀jQuery插件精选 - 设计达人

RWD Image Maps

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

100个优秀jQuery插件精选 - 设计达人

Responsive Measure

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

100个优秀jQuery插件精选 - 设计达人

Breakpoints.js

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

100个优秀jQuery插件精选 - 设计达人

面板相关

Baraja

多种面板排列风格。

100个优秀jQuery插件精选 - 设计达人

Windy

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

100个优秀jQuery插件精选 - 设计达人

ContentHover

HOVER面板效果。

100个优秀jQuery插件精选 - 设计达人

Kwicks

容器自动伸缩效果。

100个优秀jQuery插件精选 - 设计达人

Backbone.Notifier

不同类型的通知面板。

100个优秀jQuery插件精选 - 设计达人

noty

通知面板(tool tips)插件。

100个优秀jQuery插件精选 - 设计达人

Avgrund Modal.

比较好玩的提示面板。

100个优秀jQuery插件精选 - 设计达人

Tool tips提示相关系列

PowerTip

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

100个优秀jQuery插件精选 - 设计达人

qTip2

丰富的top tips揭示风格。

100个优秀jQuery插件精选 - 设计达人

Tooltipster

轻量级的tool tips提示工具。

100个优秀jQuery插件精选 - 设计达人

gips

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

100个优秀jQuery插件精选 - 设计达人

iPicture

图订式tool tips提示插件。

100个优秀jQuery插件精选 - 设计达人

Mobile-Friendly Tooltip

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

100个优秀jQuery插件精选 - 设计达人

jQuery News Ticker

新闻式的jQuery提示插件。

100个优秀jQuery插件精选 - 设计达人

与动画相关的jQuery插件

Champagne

内容随机显示。

100个优秀jQuery插件精选 - 设计达人

Real Shadow

逼真的阴影。

100个优秀jQuery插件精选 - 设计达人

jQuery Transit

jQuery与CSS3实现的动画效果。

100个优秀jQuery插件精选 - 设计达人

cssAnimate

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

100个优秀jQuery插件精选 - 设计达人

approach

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

100个优秀jQuery插件精选 - 设计达人

JSTween

简单描述CSS3动画。

100个优秀jQuery插件精选 - 设计达人

Glisse.js

结合CSS3制作的画廊。

100个优秀jQuery插件精选 - 设计达人

Wiggle

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

100个优秀jQuery插件精选 - 设计达人

Adipoli

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

100个优秀jQuery插件精选 - 设计达人

Rotating Image

图像旋转动画。

100个优秀jQuery插件精选 - 设计达人

Roundabout

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

100个优秀jQuery插件精选 - 设计达人

GFX

点击图像,展示动画。

100个优秀jQuery插件精选 - 设计达人

fc.tape

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

100个优秀jQuery插件精选 - 设计达人

jsMovie

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

100个优秀jQuery插件精选 - 设计达人

Motio

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

100个优秀jQuery插件精选 - 设计达人

模糊及其它动画特效

jGravity

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

100个优秀jQuery插件精选 - 设计达人

jqFloat.js

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

100个优秀jQuery插件精选 - 设计达人

Foggy

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

100个优秀jQuery插件精选 - 设计达人

blur.js

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

100个优秀jQuery插件精选 - 设计达人

jQuery Shadow

阴影类的jQuery插件。

100个优秀jQuery插件精选 - 设计达人

Makisu

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

100个优秀jQuery插件精选 - 设计达人

pep

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

100个优秀jQuery插件精选 - 设计达人

PFold

折叠纸效果。

100个优秀jQuery插件精选 - 设计达人

oriDomi

100个优秀jQuery插件精选 - 设计达人

BoolBlock

一个翻书效果。

100个优秀jQuery插件精选 - 设计达人

滚动、视差特效的jQuery插件

SuperScrollorama

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

100个优秀jQuery插件精选 - 设计达人

Ascensor

矩阵式滑动。

100个优秀jQuery插件精选 - 设计达人

jmpress.js

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

100个优秀jQuery插件精选 - 设计达人

Jarallax

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

100个优秀jQuery插件精选 - 设计达人

Scroll Path

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

100个优秀jQuery插件精选 - 设计达人

PageSlide

页面侧边栏jQuery插件。

100个优秀jQuery插件精选 - 设计达人

Curtain.js

视差滑动插件。

100个优秀jQuery插件精选 - 设计达人

StickyMojo

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

100个优秀jQuery插件精选 - 设计达人

Stick ’em

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

100个优秀jQuery插件精选 - 设计达人

Infinite Scroll

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

100个优秀jQuery插件精选 - 设计达人

NiceScroll

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

100个优秀jQuery插件精选 - 设计达人

nanoScroller

小尺寸的Scroll bar滚动栏。

100个优秀jQuery插件精选 - 设计达人

列表相关

Any List Scroller

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

100个优秀jQuery插件精选 - 设计达人

Sticky Slidebar

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

100个优秀jQuery插件精选 - 设计达人

Nestable

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

100个优秀jQuery插件精选 - 设计达人

Table表格相关

tablecloth

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

100个优秀jQuery插件精选 - 设计达人

Scrolite

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

100个优秀jQuery插件精选 - 设计达人

FooTable

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

100个优秀jQuery插件精选 - 设计达人

Filters

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

100个优秀jQuery插件精选 - 设计达人

表单相关插件

Garlic.js

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

100个优秀jQuery插件精选 - 设计达人

Ideal Forms

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

100个优秀jQuery插件精选 - 设计达人

SeacrhMeme

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

100个优秀jQuery插件精选 - 设计达人

gauge.js

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

100个优秀jQuery插件精选 - 设计达人

Zebra

轻量级的日期插件。

100个优秀jQuery插件精选 - 设计达人

Smart Time Ago

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

100个优秀jQuery插件精选 - 设计达人

Complexify

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

100个优秀jQuery插件精选 - 设计达人

文字文本相关jQuery插件

trunk8

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

100个优秀jQuery插件精选 - 设计达人

Typist

这个Typist jQuery插件能把文字像打字机一样展示出来,还支持换行、暂停操作哦。
100个优秀jQuery插件精选 - 设计达人

Lettering Animate

动画文字效果。

100个优秀jQuery插件精选 - 设计达人

Bacon

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

100个优秀jQuery插件精选 - 设计达人

TypeButter

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

100个优秀jQuery插件精选 - 设计达人

MagicNav

一个FAQ页面插件。

100个优秀jQuery插件精选 - 设计达人

载入加载相关的jQuery插件

mobile.lazyloader

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

100个优秀jQuery插件精选 - 设计达人

Lazy Load Script

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

100个优秀jQuery插件精选 - 设计达人

timing

可以定时执行脚本。

100个优秀jQuery插件精选 - 设计达人

Percentage Loader

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

100个优秀jQuery插件精选 - 设计达人

元素内容

Koottam

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

100个优秀jQuery插件精选 - 设计达人

floatShare

浮动的社会化按钮。

100个优秀jQuery插件精选 - 设计达人

Pageguide

CSS3动画引导页。

100个优秀jQuery插件精选 - 设计达人

Joyride

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

100个优秀jQuery插件精选 - 设计达人

Easy Pie Chart

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

100个优秀jQuery插件精选 - 设计达人

jPages

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

100个优秀jQuery插件精选 - 设计达人

Pagify.js

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

100个优秀jQuery插件精选 - 设计达人
Gantt

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

100个优秀jQuery插件精选 - 设计达人

其它jQuery插件

jQuery URL parser

URL地址解析插件。

100个优秀jQuery插件精选 - 设计达人

jquery-url

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

100个优秀jQuery插件精选 - 设计达人

Hammer.js

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

100个优秀jQuery插件精选 - 设计达人

IE Alert

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

100个优秀jQuery插件精选 - 设计达人

赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论4 Responses to “2012年回顾:100个优秀jQuery插件精选”

  1. 亲热战术_罗杰 - 回复

    不错的资源

  2. 須臾 - 回复

    感谢博主分享 刚好找到以前木有收藏的插件!谢谢了!

  3. C·爷 - 回复

    的确不错.支持.

  4. 潜行者M - 回复

    果断收藏慢慢研究,博主大好人


{ 发表评论 }