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

165 阅读 0 评论 109 点赞

我是靠谱客的博主干净电话，最近开发中收集的这篇文章主要介绍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深知这一点。（译者：作者在卖萌么？）