40 个让你的网站更加友好的 jQuery 插件

一个插件的基本功能是执行一个含有元素集合的函数数组。每个方法和jQuery核心组成一个插件，如.fadeOut()或.addClass()。一个jQuery插件是一个基本的可以扩充jQuery 原型对象的方法。当原型对象被扩充后，jQuery所有的对象都可以继承每一个扩充的方法。

jQuery有强大的社区支持，社区里有很多技能娴熟的开发者夜以继日的创造出令人惊叹的脚本和网络应用。然而，这将增大了为你任务筛选插件的难度。这就是你为什么会看到此推荐，你将在这里找40个必须的jQuery插件集合，当你应用这些插件时，将会让你得网站变得更加友好。

好好享受吧!

1.FlowType.js

FlowType.JS是一个可以自动调整字体大小和行高(根据父类的宽)的jQuery插件，这样我们的内容将呈现出我们喜欢的样子。当调整大小时，它可以设置最小/大字体，最小/大宽度。同时它对webfonts有很好的支持，下面是个展示它如何工作的例子(试着改变改变浏览器的大小).

下载

2.jQuery Flat Shadow

jQuery Flat Shadow是一个能够添加阴影效果到任何目标上的jQuery插件。它可以自定义阴影的颜色，角度，同时还可以控制阴影的开启和关闭状态。

下载

3.任意锚点JS

Arbitrary.Anchor.js是一个可以扩充标准锚点(通过#链接)功能的jQuery插件。它可以让我把目标投向任何jQuery选择器(如类和元素类型)而不仅仅局限于id。同时它对复杂的选择器支持的也不错。(如http://example.com#.sup.brah-这要匹配两个类)。点击链接将会产生平滑的自动滚动效果。而且，这个滚动的速度也可以在链接里设置(如 http://example.com#.sup.brah｜100 )

下载

4.tidyTime.js

tidyTime.js是一个友好展示时间的jQuery插件。时间数值将被转化为如：“9点过一刻”，“5点整”，“7点57”字串等等。而且，这个插件允许我们可以在时间的前边或是后面添加自定义字串，如：“嗨，现在是3点50分，要快哦！”。也可以根据不同的时间戳指定字串，这样当触发tidyTime时就会产生一个存在的回调。

下载

5.Sticky-kit

Sticky-kit是一个很方便的jQuery插件，它能简单的创建/管理粘性元素，而且一些组合特性也能用于复杂应用中。这些特性包括“处理多个粘性元素”，“根据元素在视图中的位置开启和关闭行为”以及回调。同时它也有根据浏览器大小改变重新计算元素尺寸的函数。

下载

6.Owl Carousel

Owl Carousel是一个可以让我们快速创建响应式旋转木马滑块的插件。它支持触摸和能够展示包含任何标签的HTML内容。它可以设置换页/滑动速度、开启/关闭自动演示，展示豆子导航等。同时，也可以定义桌面显示项目的数目，Owl Carousel可以自动的区分平板和手机。

下载

7.SlimMenu

SlimMenu 可以将带有深度的非顺序列表转化为一个带有子菜单的菜单，在小屏幕上，菜单变成下拉式导航。它支持触摸和自定义选项如动画和速度。

下载

8.Tabulous.js

Tabulous.js是一个轻量级的jQuery插件，它能用普通的HTML结构来简单的创建。选项卡可以用CSS创建，同时存在开关效果(滑动，缩放，翻转)。它没有复杂的特性，就只有选项卡，它的特效有时就是我们想要的。

下载

9. EasyAB

这是一个快速创建A/B或者多元测试的jQuery(和Zepto)插件。一旦事件被触发，他们就会被Google Analytics中的自定义变量记录下来。easyAB可以添加任何数量的命令，同时它们可以自定义到JavaScript函数中。

下载

10. S Gallery

S S Gallery是另外一款jQuery图片画廊插件，它能够在可以有响应事件的网格中显示图片。它的灵感是来自于sony产品首页的画廊效果(sony产品首页是用flash制作的)，然后S Gallery完全模仿了它。当某个单元格被点击并且获取到焦点的时候，你就可以通过向前-向后按钮或方向键来浏览其他的图片。

下载

11. Twenty Twenty

TwentyTwenty 是一个视觉扩散工具，非常容易的就能够辨认出它们。它的原理是两张图片互相堆叠在对方的上面。当滑块移动通过整个图像的时候，它利用css的属性来调整左侧的图像。这允许右边的图像显示通过容器。

下载

12. SMint

Smint 是一款简便的jQuery插件，她可以帮助你实现一页风格网站的导航。她由两个元素组成，一个是粘性的导航条，他可以在你滚动你的页面时停留在整个页面的顶部；另一个是菜单按钮，它可以自动地让页面滚动到你锁点击的区域。SMINT是一个简单的插件，她又一个选项可以控制页面的滚动速度。她的默认速度是半秒钟，当然你也可以把她设置到任意你想要的时间。下载的组件中还包含有例子，她们都可以免费的作为您单页网站的惹眼的模板。

下载

13.Loda Button:加载时的动态按钮

Loda Button 是一款简易的jq插件动态按钮图标，在等待从服务器获取数据时使用。loda-btn和loda-icon的样式被用在了这款插件的按钮组件中。他的样式十分简单，并且放置在loda-button.css文件中。此组件的动态效果是使用支持Chrome,Firefox,Opera和IE10的css3的animation,transitions和transforms实现的。

资源

14. Pop Easy

PopEasy是一个轻量jQuery插件，它是任何一个像轻易创建模态窗口的开发者所必备的。通过在你的页面上应用一个遮罩效果并弹出一个定制的模态窗口，来让你的焦点放在重要的信息上。

要在页面上使用多个模态窗口，你必须在你希望打开的div层中同步id触发器的href属性。这种工作原理和从一个弹出的模态过渡到另一个模态的原理是一样的。只需要在你希望离开的模态窗口中放置一个href连接，它和另一个模态的id相匹配。源码

15. Reveal

Reveal很了不起，实现起来也简单，是一个跨浏览器并兼容现代浏览器(还带有优雅降级功能)。同时它很轻量，只有1.75KB。设置Reval模态只需要三步。附加所需文件，放入模态的标记处然后给你的按钮添加属性。Reval遵守MIT许可。源码 

16. Hide/Show Password Plugin

Hide/show Password插件让你轻易隐藏和显示密码输入栏中的内容。这个插件最酷的部分就是”innerToggle“选项。当设置为开的时候，它可以很容易创建漂亮隐藏/显示 控件，你可以定制自己喜欢的样式。在触屏浏览器中，你滑动的时候它甚至能保持输入焦点。源码

17. Readmore.js

Readmore.js是一个平滑的，轻量的jQuery插件，用于折叠和展开大段的文本。并带有“”和“关闭”链接。 Readmore.js所需的标记语言极其轻量而简单。不需要div层的复杂设置或者硬编码的类名，只需要在包含大段文本的元素里调用.readmore()，Readmore.js就会帮你处理剩余的工作。源码

18.向上滚动

ScrollUp是一个轻量级jQuery插件，它可以简单的创建适用于任何网站的用户自定义“向上滚动”特性。给activeOverlay设置一个可用的CSS颜色，这样你可以创建一个可见的线条帮助你决定一个适合的高度(出现向上滑动的标识,译注)。

源码

19.FlipClock.js

FlipClock.js是一个可呈现任何和时间相关的可重复性特效的jQuery插件。FlipClock.js可支持作为一个时钟，倒计器和计时器，同时用户也自定义完整的CSS来改变它的外观。它有可以自动开始的选项，还有很多回调方法来控制(start,stop,getTime,setTime…)。同时，它也有可以增加功能的全功能API。

源码

20. Mobiscroll

Mobiscroll是用于触摸设备(安卓手机，iPhone，Galaxy平板)的旋转滚轮/日期和时间选择器的jQuery插件。这个控件能轻易地定制来支持任何常规值并能用于常规选择控件(下拉列表)作为直观的选择项。这种控件可以更换主题，你可以在CSS里更改外观。它还带有预定义，漂亮的配色方案，并通过了IOS4，Android 2.2，Android 2.3,Chrome,Safari,Firefox和IE9的测试。源码

21. Minimit Gallery

Minimit Gallery 是一个高度可定制的，可无限扩展的插件，用来显示相册、幻灯片、旋转木马、滑动等效果， 实际上所有包含复杂效果的东西不超过10kb 。使用 Minimit Gallery 你可以将更多的时间放在构思和界面的动态效果上，所有的逻辑功能将通过此插件来进行管理。它是为JavaScript/Jquery 高级程序员设计的，因为你需要编写所有的动画和相册样式表。它已经在IE7+， Firefox， Safari 和 Chrome上测试通过。源代码 & 示例 

22. Cycle 2

Cycle是一个相当古老却很流行的jQuery幻灯片插件。它现在有一个新的，改进的版本:Cycle2.这个插件非常适用于任何想要创建完全自定义的幻灯片的人群，使用这个插件不需要声明任何标记语言或者样式。功能上，它也很灵活。Cycle2支持响应布局，对全部或单个的幻灯片有设置选项，并能通过全特性API轻易地得到拓展。源和演示 

23. Circular Content Carousel

这款插件用在在可以附着概要描述内容的滑动条上，当用户点击内容时(图片中的more按钮)，一个小的盒子会滑动到当前盒子的旁边，在那里用户可以阅读和看到与主题相关的详细信息，并且滑动条还可以起到导航的作用。

资源和范例

24. Tooltipster

Tooltipster 是一个 jQuery 插件，用来快速创建 HTML5验证 和灵活的工具提示。这个插件体积小小 (4.8kb 缩小后)，运行速度快，并且能够灵活定制。它的外观可以通过CSS(主题支持)和箭头的位置来改变。跟随鼠标，外观的延迟/周期，都可以进行定义。源代码 

25. Colortip

它在你的页面中把元素的title属性转化为一系列的多彩的工具提示(tooltips)。有6中颜色可用，所以你可以轻易地在你的设计中配色。在colortip-1.0-jquery.js中，你还可以通过把附加的样式类包含到样式表，给颜色数组添加元素来创建自己的工具提示。

源码

26. MasonJS

MasonJS，这个jQuery插件用来解决当前大多数的网格系统相关的问题。当使用Masonry,Isotope或者任何其他的网格插件,你的网格将会包含凹凸的边缘和沟缝。Mason就是用来填充这些沟缝的。

MasonJS关注你的网格并查找所有构成网格的元素。它创建了一个基于这些元素尺寸的完美网格阵列，并循环查找网格中的每一个元素块来决定缝隙的位置。然后他就用填充元素填充缝隙，这是你可以定义或者在你的网格中复制元素。

源码

27. Unslider

Unslider是一个只能滑动的jQuery滑块插件。没有奇特的滑动效果没不需要标记，并且它体积小于3kb。 它非常流畅，灵活，体积非常小。 Unslider已经在所有最新的浏览器中测试过，并能在落后的浏览器中优雅降级。你可以在需要的时候添加键盘指针支持。不是所有的滑动都一样，Unslider也知道这一点。在没有额外的代码下，它能在高度上时尚地过渡。这些天你很难找到不能响应的网站。Unslider回来了，它是完全响应的。源码

28. Camera : 支持触摸的jQuery幻灯片插件

Diapo的开发者已经创建了一个新鲜的插件，叫做Camera，它带有很多特性并在响应式布局中工作良好。可以通过HTML元素(图像，文本，视频等)来创建幻灯片，Camera会在一个外观优美的接口中显示出来并带有一系列的过渡效果。

源码

29. Royal Slider

Royal Slider是一个jQuery插件，它可以在滑动片中显示任何HTML内容(图像，视频，文本等)，并带有不凡的特性。幻灯片有50项可供定制，4套带有PSD源文件的皮肤，9个预组件的模板(不断更新)和所有的CSS样式。在CSS3的动画效果下(JS降级)，该插件工作在主流的浏览器中，并能在移动设备中响应式输出，运行高速。同时，因为有了延迟加载功能(只加载部分项目),在有很多幻灯片的情况下，它也能快速完成加载。源码

30. Progression.js

Progression.js插件在用户完成表格时提供实时提示和经度更新。你所需要做的就是给你的表格一个唯一的ID。然后把数据进度的数据属性添加到每一个元素，这些元素是表格中的一个处理步骤。一旦你创建了表格，你就要初始化这个插件。

源码

31. jQuery 颜色板

jQuery.swatches 是免费的，用来将单行的div转变为漂亮的彩色调色板。你可以按照希望的方式对其自定义。每一次对不同的选择符调用swatchify()的时候，使用不同的类将会渲染出不同的色板组。 下载

32. jPages : JavaScript 驱动的分页插件

jPages是一个客户端的分页脚本 (一个 jQuery 插件) ，它具有键盘+滚动浏览，自动翻页，延迟显示以及自定义浏览面板的特性。同一个页面可以插入任何数字的分页元素，并且非常容易放置定位。下载

33. FitText

FitText是一个简单单功能性强的jQuery插件，它用来创建适应已定义元素的文本。它能自动更新字体尺寸并，并自动适应换行元素，保证不会因为字体因素而造成布局崩溃,能在移动端或PC端浏览器中显示页面。下载 

34. FitVids.js

FitVids.js是一个轻量的，简单易用的jQuery插件用于创建流畅的嵌入视频。FitVids自动设置固有比率方法来在你的响应式设计中完成创建流畅的视频。下载 

35. Swipebox

Swipebox是一个jQuery灯箱插件，并支持触摸事件，在响应式布局中也工作良好。当使用擦除手势或者键盘事件时，它会显示单个或者一组图形性质的元素。插件主要使用CSS过渡并在支持性不好的浏览器中提供jQuery降级。下载

36. Turn.js

Turn.js是一个jQuery插件，它带有可爱光滑的翻页过渡效果。第一页作为封面，剩余部分可以通过翻动页面的任意角度来浏览。Turn.js只有15kb，可在移动端和平板浏览器中使用，并使用了硬件加速。下载 

37. imBookFlip

imBookFlip插件能在一个内联框架或者直接在整个页面显示出书本样式的内容。页面可以设置为可翻动，用户可以点击或者通过自动播放来翻页。悲哀的是，它不支持拖动翻页效果。同样，它的API允许直接指向目标页面。下载 

38. Booklet

Booklet可能是这个列表里选项最多的插件，它能配置每一个变量。JS翻页效果不是很强大，因为它要保持内容在范围内(不超过书本本身)，但它工作健壮。可以通过键盘，前后键或者自动播放来翻页。每一个页面有一个唯一的URL(使用哈希标签)。它支持章节，显示页面号，回调交互。下载 

39. Gmaps.js

GMaps.js 是一款资源丰富的jQuery插件，它可以使消耗过高的谷歌地图轻便化。此外，加入了一个特殊定位的标准地图，我们可以定义其缩放比例，添加商场，得到用户所在位置(HTML5 geolocation)，定义了路径，标记出路线并且还有跟多内容仅仅通过一小段代码。

下载

40. JQVMap

JQVMap用来渲染矢量地图的jQuery插件，它在现代浏览器中使用SVG，其余的浏览器中使用VML。这是一个基于jVectorMap插件高度修改的版本，带有即用的世界地图。有很多美化地图的选项，如颜色，边框或模糊。

下载