50个jQuery插件可将你的网站带到另外一个高度

Web领域一直在发生变化而且其边界在过去的每一天都在发生变化（甚至不能以小时为计），随着其边界的扩展取得了许多新发展。在这些进步之中，开发者的不断工做创造了更大和更好的脚本，这些脚本以插件方式带来更好的终端用户体验，它们比原来更轻量级，还有更强的处理能力。 关键是这些新发展起来的脚本和插件是能构建响应式Web的，并且还不会丧失它们原有的功能特性——除了更优秀和更轻巧（就文件大小而言）以外，它们还不会增长页面加载的时间。 经过浏览文档，掌握JQuery的语法是很容易的。它能够支持选择DOM元素，建立动画，处理事件，开发Ajax应用，甚至还为开发者提供了基于JavaScript类库之上建立插件的能力。

jQuery架构的开发人员可以建立一个插件代码来扩展其功能，从而可以产生一些最好的插件，让你的网站或任何给定的项目达到一个全新的水平。 在这篇文章中，咱们已经积累了一些供你挑选的最佳JQuery插件，这些插件提供了各类的功能和特性可以让你的网页呈现许多可想象到的效果。咱们但愿你可以在下面的列表中找到你正在寻找的插件。 在下面的评论区域让咱们知道哪些插件你之前使用过或者你正在考虑在未来的项目或网站中使用哪些插件。

1. FlickerPlate Flickerplate是一个可让你弹出内容的易用jQuery插件。它也依赖Modernizr来进行触碰检测和在触碰事件使用jQuery.Finger库。Flickerplate经过不少种方式配置。你能够经过Javascript调用来设置选项。或者你能够经过在实际的元素上经过data属性设置选项。 2. Tagging JS TaggingJS 是一个用来建立高度可定制的前端标签系统的jQuery插件。它小于3 kb而且支持世界上大部分浏览器。它基于MIT 许可。

3. Scroll Magic ScrollMagic 是一个神奇滚动交互的jQuery插件， ScrollMagic  容许你像进度条同样使用滚动条。若是你想在指定滚动位置启动一个动画，保持和滚动条运动同步动画，并固定一个元素到指定滚动位置（黏性元素），这就是为你而设的插件。 32. jPages : JavaScript Powered Pagination jPages 是一个客户端分页脚本（一个jQuery插件），具备像键盘+滚动导航，自动换页，延迟展现和一个可自定义的导航面板的特性。分页元素的任意页数可以插入到相同的页面，而且可以轻易定位。

5. PNotify    PNotify 是一个由SciActive 开发的 JavaScript的通知插件，曾用名Pines Notify。它的设计理念是提供一个极度灵活而又很是容易实现和使用。它能够提供非阻塞的通知。容许用户在不关闭它的状况下点击通知后面的元素。PNotify 使用了Bootstrap 和 jQuery UI来定义样式，这意味着能够很是容易的对它进行自定义主题样式。 6. Wholly Wholly 是一个jQuery的插件用来触发表格列上的mouseenter 和 mouseleave事件。Wholly 用来高亮整个表格列，而且支持表格的colspan和rowspan属性。若是你想要支持colspan和rowspan属性，那么首先你须要构建表格单元格的索引(cell index)。以后，你须要追踪表格全部单元格的事件，找出你感兴趣的，并计算出它们在矩阵中的offset以及共享同一个垂直索引(vertical index)的列。Wholly在设定特定样式方面是没有任何限制的。

7. MixitUp MixItUp 是一个jQuery插件，提供动画过滤和排序。在管理容易归类或者像文件夹同样的有序内容和博客时很是不错，可是也能做为一个吸引人的应用UI和数据可视化的一个强大的工具起做用。 8. Velocity.js Velocity是一个jQuery插件，它从新实现了$.animate() 同时包括改善动画流程的新特性 (使得 Velocity也比CSS动画库更快) ，用来产生性能显著的动画。

9. rowGrid rowGrid.js是一个小的，轻量级(gzip后大约700 比特)的 jQuery插件，用来在径直的行里放置图片 (或者其余内容项)。网格相似Google图片搜索，flickr，shutterstock 和Google+ 图片的网格。 rowGrid.js 是响应式的，它容许用户无限滑动。全部的内容项拥有相同的高度，但宽度是可变的。 10. Croppic Croppic 是一个图片裁切jquery插件。它能提供知足你的需求外更多的功能。 简单上传一张图片，而后你可以按照你喜欢的放大缩小的实际状况来裁剪图片。它需在IE 10+， chrome，和firefox才能正常工做。它使用FormData因此如今不支持IE9和以前的版本。

11. ImageLightbox.js ImageLightbox.js是一个难以置信简单，响应式，触碰友好灯箱效果的脚本。它是由可扩展的，可配置的，极简化的(瘦身后只有4kb)，而且使用CSS变形和转换来移动图片。 12. jQuery Tip Cards Tip Cards 插件容许你建立你在Google Tips页面看到的使用相似卡片交互的cards布局。 有几种新的动画选项，因此你能够按你喜欢的进行人性化定制。你能够在模态窗口打开或者关闭的时候，使用回调方法来进行操做。已在像Chrome，Firefox和Safari的桌面现代浏览器测试过。

13. Floatlable.js 在Brad Frost写一篇关于浮动标签模式的博客文章后，浮动标签模式取得了成功。这想法是基于Matt D Smith 的 Dribbble Shot。这种模式很容易解释。在用户使用一个输入字段交互时，placeholder的值向上移，并在类型文本上面显示。 14. Nanogallery nanoGallery对jQuery来讲很容易实现图片画册插件。它具备不少特性：支持触碰，响应式，快速和支持云储存。 相册多级导航，灯箱效果，许多缩略图的hover效果，滑动展现，全屏，分页，图片延迟加载，主题，兼容bootstrap，可定制，可从Flickr/Picasa/Google+拉取照片等等。

15. jQuery Panorma Viewer jQuery Panoram Viewer 帮助你在网站内嵌Panorama图片。使用这个插件，你可以在你的网站显示你的Panorama图片。为了作到这些，首先你不得不在你的文档中包含最新的JQuery库和 jquery.panorama_viewer.js以及 panorama_viewer.css，而后在HTML上给你的图片增长" panorama " 类。现代浏览器例如Chrome,Firefox和Safari的桌面和移动版本都已经测试经过。 16. SVG Magic SVGMagic是一个跨浏览器的兼容JQuery插件，它搜索你网站上的SVG图片，若是浏览器不支持SVG，自动的建立PNG版本。它是简单的，单一目的的插件，不须要配置。

17. BttrLazyLoading BttrLazyLoading是个容许你的网页应用在窗口里面只加载图片的jQuery插件。它也容许你在4个不一样屏幕尺寸里拥有不一样版本的图片。BttrLazyLoading容许你的网页应用延迟加载图片，直到被滚动到图片。这样的方式下，页面加载时间大幅度减小。 18. Remodal Remodal 是一个扁平化，响应式，轻量级，高速，易定制的，声明性状态注释和哈希追踪的模态窗口插件。全部的现代浏览器都支持。你能够轻易地定义模态背景容器（就像一次失焦效果）。

19. Slinky.js Slinky.js 是一个用在使用堆叠头部建立滑动导航列表的jQuery插件 。它有无数的特性：就像经过禁用光标事件来平滑滑动，压缩后大约1KB的 轻量级，在窗口重调大小和DOM改变上刷新，还有和你喜欢的最新版本的浏览器兼容。 20. Adaptive Backgrounds Adaptive Backgrounds 是一个jQuery插件，用在从图片抽取主要颜色和应用到父元素。这个插件利用了画布元素和ImageData对象，归根于其跨站安全限制，若是某个脚本试图从非当前域名主机抽取图片的颜色将会失败，除非图片容许跨源资源共享。

21. Bigfoot 网页的脚注是烦人的。你点了一个小数字，跳转到页面底部附近，找到你寻找的脚注，而后点击一个连接回到页面原来的地方。Bigfoot看起来让整个处理流程再也不痛苦。它自动检测脚注连接和内容，将连接转化成一个容易点击的按钮，当读者点击脚注按钮的时候弹出浮窗（译注：官方演示的版本是直接跳转）。 22. Dynatable Dynatable是一个使用jQuery，HTML5和JSON的，更有趣的，语义化的，交互表格插件。 而且不只是用在表格上。Dynatable 的目的是提供一种简单的、可扩展的 API，可以轻松地浏览和操做大数据集。

23. jQuery Label Better jQuery Label Better 就像个优雅动画的老大同样帮助你在表单输入上不占空间地定标签。这个插件最独特的是你须要作的全部工做仅是添加一个占位符的文本，咱们将在当用户须要的时候显示标签。 24. Stickup stickUp 是一个jQuery 插件。你能够在任意使用jQuery的网页上执行。你能够简单地在任意页面建立任意你想用户在任什么时候候均可以看见的元素，只要用户滑超它，就会粘到浏览器窗口的顶部。

25. Free Wall Freewall是一个跨浏览器响应式的jQuery插件，它使用很棒的CSS3动画效果和回调事件，能帮你建立不少类型网格布局：可伸缩布局，图片布局，嵌套网格，流式网格， metro风格网格，类品趣志网格。Freewall是个建立桌面，移动和平板的动态网格布局的一体化解决方案。 26. jQuery Interactive 3D jQuery Interactive 3D是一个容许咱们使用多图完成一个相似功能的插件。 使用起来简单，使用简单的函数和指定一组名字的图片。 还有，还拥有定制化的可选项，好比光标图标，速度，支持触屏，自动播放等等。

27. Succinct Succinct是一个用做截断多行文本的jQuery小插件。它缩短你的文本到指定的尺寸，并在后面添加省略号。你能够用选择器指定要截断的元素，而后设置你想看到的数量的尺寸参数。 28. SlideMe SlideMe!是一个响应式样的，CSS3兼容的jQuery滑动条插件，它同时支持受限的和全屏的视图。它能用在竖屏和横屏， 使用了CSS3转换和支持分页。提供控制滑动的方法(prev, next等)，还有它们及更多方法对应的回调方法。

29. Glide.js Glide.js是一个轻量级（压缩后4.5kb）的jQuery插件，用于建立滑块。其具备彻底可定制的OOCSS标记及CSS3转换，并且能够回调JavaScript。该滑块是响应式的；其能适应全部的设备并有对触摸的支持。你能够经过键盘、滑动事件、弹窗或箭头菜单来控制元素。Glide.js还有支持全部的事件（播放，暂停，下一步，上一步，等）公共的API。 30. PhotoJShop PhotoJShop是一个容许咱们对图像应用简单效果及过滤器的jQuery插件。这些过滤器包括模糊、底片、浮雕、减轻、变黑、黑白、锐化以及更多。插件能够在canvas和图像上工做，而且过滤器很容易使用。

31. One Page Scroll One Page Scroll是一个jQuery插件，其简化了建立相似网站的难度。它只须要不多的设置，只须要建立HTML结构，调用函数你就已经就绪了。可选的，做为附加功能，其速度和循环行为也能够设置。并且它支持每一个页面的SEO友好型URL。 32. FerroSlider FerroSlider是一个用于建立整页面（或者是内容/图像滑块）等几乎全部类型滑块的jQuery插件。内容能够以灵活的方式放置，水平或垂直，插件都可以使得浏览起来很容易。为提升性能它使用了CSS3变换，可以与响应式布局良好配合且能应用在移动平台上。

33. Scrolld.js Scrolld.js是一个独特的jQuery开源插件。Scrolld.js使用实时更新的数据为像素级布局和导航提供了一个高度精确的滚动。使用Scrolld.js ，你总能精确的滚动到指定目标而且总能提供最好的用户体验。 34. AnimateScroll AnimateScroll是一个简单的jQuery插件，能够用来添加松弛的滚动条效果。你能够自定义滚动条样式（30多个滚动效果）以及滚动速度。“padding”属性能够控制滚动条的结束位置。该插件不只限于整个的body页面，并且能够用于指定的元素。

35. MasonJS MasonJS jQuery 插件是用来解决大部分网格系统目前都会遇到的问题，缝隙。当使用Masonry, Isotope 或任何其余网格插件时，你的网格有时总会出现缝隙或良莠不齐的边。Mason就是用来填充他们的。 36. JInvertScroll jInvertScroll 是一个控制默认滚动行为和强制纵向滚动的jQuery插件。该插件足够轻量级（小于1kb）而且几乎不需设置即可使用。为包装元素添加指定类而且调用JS函数就能够了。另外它能够用onScroll回调（咱们能够决定调整任一元素的地方）轻易建立视察效果。

37. Flowtype.js FlowType.JS是一个能够自动调整字体大小（font-size）和行号（line-height）的jQuery插件（根据包装元素的宽度），使得咱们的内容能够像咱们但愿的那样显示。该插件提供了设定最小/最大字体尺寸和宽度的属性。 38. nProgress NProgress.js是一个纳米进度条。以现实的细腻的动画告诉用户正在发生的事情。它是一个灵感源于Google，YouTube，和Medium的轻量级的进度条，完美适用于Turbolinks, Pjax,以及其余 Ajax级别的应用。

39. Tidy Time.js 想使用对人友好的语言，来展现一个基于时间的更新？TidyTime.js就是个作这事的插件，它转化标准的时间格式到我的声明的时间格式。 40. Fullpage.js FullPage.js是一个简单易用的插件，用来建立全屏滑动网页（也被认为是单页面网站）。它容许你建立全屏滑动网站的同时，也添加一些横向打印风格的轮播器到站点的各个部分。它被设计成适用于不一样屏幕尺寸，以及平板和移动设备。

41. jQuery Flat Shadow jQuery Flat Shadow是一个能够为你想的任何东西添加衰退阴影的插件。它可以定义阴影颜色，角度和启用\禁用阴影衰退。 42. Owl Carousel Owl Carousel 是一个容许你快速建立响应式旋转滑动条的jQuery插件。 插件是触碰友好而且拥有任意表示的任意HTML内容的特点。它有可选项用来设置分页/滑动速度，启用/禁用自动播放，显示插入导航和其它。

43. S Gallery S Gallery是另一个在响应式方格展现图片的jQuery图片画册插件。 其灵感来源于Sony的产品页面画册 (使用Flash制做) ，并完整模仿了它。 一当一个图片项被点击和得到焦点，就可使用向前-向后按钮或者经过 键盘浏览其余的图片项。 44. Pop Easy PopEasy是一个轻量级jQuery插件，对于一个开发人员简单建立模态窗口是必须的。经过在你的页面应用一个遮罩并打开一个可定制的弹出模态窗口，把焦点放在重要的元素上。

45. Scroll Up ScrollUp是一个轻量级的jQuery插件，用来建立自定义的“滑动到顶部”功能，能够简单地用到任何网站。经过指定一个有效的CSS颜色到activeOverlay设置，建立一个可视线来帮助肯定距离顶部的理想滑动距离。 46. Mobiscroll Mobiscroll是一个用在触屏设备（Android手机，iPhone，iPad，Galaxy Tab）上的轮滑跑马灯，或者日期时间拾取器的jQuery插件。控制器能轻松地进行定制以支持任意自定义值，而且甚至直接做为原生的选择控制器（下拉列表）的一种替代方案使用。控制器是能够主题化的。在CSS里你能轻易改变外观。它也支持预约义，好看的颜色模式。已在iOS4，Android 2.2，Android 2.3，Chrome，Safari，Firefox，IE9上测试过。

47. Cycle2 Cycle，是过去的一个很是受欢迎的jQuery幻灯片播放插件，如今有了一个加强的版本：Cycle2.该插件对于那些期待建立彻底个性化的幻灯片展现效果的人是很是完美的，由于它没有声明任何标记或样式。而且，它的功能很是灵活。Cycle2支持反应灵敏的布局，几乎包含应对全部的选项（全局或者单张幻灯片），经过使用所有特性的API，还能够很是轻松的进行扩展。 48.Tooltipster Tooltipster 是一个 jQuery 插件，用于快速建立 HTML5 验证和灵活的工具提示。该插件属于“麻雀虽小，五脏俱全”的类型，压缩后仅4.8kb，可是工做起来很是快，而且能够轻松的定制。它的外观能够用 CSS （主题支持） 和箭头进行修改，跟随鼠标的位置改变，延迟等外观特效均可以被定义。

49.FitText FitText是一个很是简单可是却功能强大的jQuery插件，可用来确保文本可以适应已定义好的元素。它根据元素环绕它的宽度自动更新字体大小，并保证布局不会太零碎（由于字体大小），即便页面是在桌面浏览器或者移动端中显示。还有，该插件提供了一些选项微调，包括设置"水平缩放"的能力和尺寸的最小到最大。 50. Unslider Unslider是且仅仅是用于图片展现的jQuery滑块插件。没有华丽的特效和多余的装饰，该插件小于3kb。它是流畅、灵活，而且使人难以置信的小。Unslider已经在目前全部的浏览器最新版本中进行了测试，再不是那么新的浏览器中，只能看到它“落寞的辉煌”。若是你须要，你能够添加键盘方向键支持。不是全部的滑块插件生来平等，Unslider深知这一点。（译者：做者在卖萌么？）