50 个 jQuery 插件可将你的网站带到另外一个高度_jquery
- WBOY原创
- 2016-05-16 15:03:421198浏览
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 ! est un plugin de curseur jQuery réactif et compatible CSS3 qui prend en charge les vues restreintes et plein écran. Il peut être utilisé sur des écrans portrait et paysage, utilise des transitions CSS3 et prend en charge la pagination. Fournit des méthodes de contrôle du glissement (précédent, suivant, etc.), ainsi que des méthodes de rappel qui leur correspondent et plus encore.
29.Glide.js
Glide.js est un plugin jQuery léger (4,5 Ko gzippé) pour créer des curseurs. Il dispose d'un balisage OOCSS et de transformations CSS3 entièrement personnalisables, et peut rappeler JavaScript. Le curseur est réactif ; il s’adapte à tous les appareils et prend en charge le toucher. Vous pouvez contrôler les éléments via le clavier, les événements de balayage, les fenêtres contextuelles ou les menus fléchés. Glide.js dispose également d'une API publique qui prend en charge tous les événements (lecture, pause, suivant, précédent, etc.).
30.PhotoJShop
PhotoJShop est un plugin jQuery qui nous permet d'appliquer des effets et des filtres simples aux images. Ces filtres incluent le flou, le négatif, le gaufrage, l'éclaircissement, le noircissement, le noir et blanc, la netteté et bien plus encore. Le plugin fonctionne sur le canevas et les images, et les filtres sont faciles à utiliser.
31. Défilement d'une page
One Page Scroll est un plugin jQuery qui simplifie la création de sites Web similaires. Cela nécessite très peu de configuration, créez simplement la structure HTML, appelez la fonction et vous êtes prêt. En option, comme fonctionnalité supplémentaire, sa vitesse et son comportement en boucle peuvent également être définis. Et il prend en charge les URL optimisées pour le référencement pour chaque page.
32. FerroSlider
FerroSlider est un plugin jQuery permettant de créer des pages entières (ou des curseurs de contenu/image) et presque n'importe quel type de curseur. Le contenu peut être placé de manière flexible, horizontalement ou verticalement, et les plugins facilitent la navigation. Il utilise les transformations CSS3 pour améliorer les performances, fonctionne bien avec les mises en page réactives et fonctionne sur les plates-formes mobiles.
33.Scrolld.js
Scrolld.js est un plug-in open source jQuery unique. Scrolld.js fournit un défilement très précis pour la mise en page et la navigation au niveau des pixels à l'aide de données mises à jour en temps réel. Avec Scrolld.js, vous pouvez toujours faire défiler avec précision jusqu'à la cible spécifiée et toujours offrir la meilleure expérience utilisateur.
34. AnimerScroll
AnimateScroll est un simple plug-in jQuery qui peut être utilisé pour ajouter un effet de barre de défilement détendu. Vous pouvez personnaliser le style de la barre de défilement (plus de 30 effets de défilement) et la vitesse de défilement. L'attribut "padding" contrôle la position finale de la barre de défilement. Ce plugin n'est pas limité à l'intégralité de la page de corps, mais peut également être utilisé pour des éléments spécifiés.
35.MaçonJS
Le plug-in MasonJS jQuery est utilisé pour résoudre les problèmes et les lacunes que rencontrent actuellement la plupart des systèmes de grille. Lorsque vous utilisez Masonry, Isotope ou tout autre plugin de maillage, votre maillage aura parfois des espaces ou des bords irréguliers. Mason a l'habitude de les remplir.
36.JInvertScroll
jInvertScroll est un plugin jQuery qui contrôle le comportement de défilement par défaut et force le défilement vertical. Le plugin est suffisamment léger (moins de 1 Ko) et ne nécessite pratiquement aucune configuration pour être utilisé. Ajoutez simplement la classe spécifiée à l'élément d'emballage et appelez la fonction JS. De plus, cela facilite la création d'effets d'inspection à l'aide du rappel onScroll (où nous pouvons décider de redimensionner n'importe quel élément).
37. Flowtype.js
FlowType.JS est un plug-in jQuery qui peut ajuster automatiquement la taille de la police (font-size) et le numéro de ligne (line-height) (en fonction de la largeur de l'élément d'habillage) , ce qui permet à notre contenu d'être affiché comme nous le souhaitons. Le plugin fournit des propriétés pour définir la taille et la largeur de police minimales/maximales.
38. nProgrès
NProgress.js est une barre de progression nano. Informez les utilisateurs de ce qui se passe avec des animations réalistes et détaillées. Il s'agit d'une barre de progression légère inspirée de Google, YouTube et Medium, parfaite pour Turbolinks, Pjax et d'autres applications de niveau Ajax.
39. Tidy Time.js
Vous souhaitez afficher une mise à jour temporelle en utilisant un langage convivial ? TidyTime.js est un plug-in qui fait cela, en convertissant les formats d'heure standard en formats d'heure déclarés personnellement.
40.Fullpage.js
FullPage.js est un plug-in simple et facile à utiliser pour créer des pages Web coulissantes en plein écran (également considérées comme des sites Web d'une seule page). Il vous permet de créer un site Web coulissant en plein écran tout en ajoutant des carrousels de style paysage à différentes parties du site. Il est conçu pour fonctionner avec différentes tailles d’écran, ainsi qu’avec les tablettes et les appareils mobiles.
41. jQuery Ombre plate
jQuery Flat Shadow est un plugin qui peut ajouter une ombre de désintégration à tout ce que vous voulez. Il est possible de définir la couleur et l'angle de l'ombre et d'activer ou de désactiver l'atténuation de l'ombre.
42. Carrousel de hiboux
Owl Carousel est un plugin jQuery qui vous permet de créer rapidement des curseurs rotatifs réactifs. Le plugin est convivial et présente n'importe quel contenu HTML dans n'importe quelle représentation. Il propose des options pour définir la vitesse de pagination/balayage, activer/désactiver la lecture automatique, afficher la navigation en encart et bien plus encore.
43.S Galerie
S Gallery est un autre plugin d'album photo jQuery qui affiche les images dans une grille réactive. Il s'inspire de la brochure de la page produit de Sony (réalisée avec Flash) et l'imite complètement. Une fois qu'un élément d'image est cliqué et obtient le focus, vous pouvez accéder à d'autres éléments d'image à l'aide des boutons avant-arrière ou via le clavier.
44. Pop Facile
PopEasy est un plug-in jQuery léger qui est indispensable pour qu'un développeur puisse créer facilement des fenêtres modales. Mettez l'accent sur les éléments importants en appliquant un masque à votre page et en ouvrant une fenêtre modale contextuelle personnalisable.
45. Faites défiler vers le haut
ScrollUp est un plugin jQuery léger permettant de créer une fonctionnalité personnalisée "glisser vers le haut" qui peut être facilement utilisée sur n'importe quel site Web. En attribuant une couleur CSS valide au paramètre activeOverlay, une ligne visuelle est créée pour aider à déterminer la distance de glissement idéale depuis le haut.
46.Mobiscroll
Mobiscroll est un plug-in jQuery permettant de faire défiler des chapiteaux ou des sélecteurs de date et d'heure utilisés sur les appareils à écran tactile (téléphones Android, iPhone, iPad, Galaxy Tab). Les contrôleurs peuvent être facilement personnalisés pour prendre en charge toutes les valeurs personnalisées et peuvent même être utilisés directement comme alternative aux contrôleurs de sélection natifs (listes déroulantes). Les contrôleurs peuvent être thématiques. En CSS, vous pouvez facilement modifier l'apparence. Il prend également en charge des modes de couleur prédéfinis et esthétiques. Testé sur iOS4, Android 2.2, Android 2.3, Chrome, Safari, Firefox, IE9.
47.Cycle2
Cycle, un plugin de diaporama jQuery très populaire du passé, dispose désormais d'une version améliorée : Cycle2. Ce plugin est parfait pour ceux qui cherchent à créer des diaporamas entièrement personnalisés car il ne déclare aucun balisage ni style. De plus, sa fonctionnalité est très flexible. Le cycle 2 prend en charge les mises en page réactives, inclut des options pour presque toutes les options (diapositives globales ou individuelles) et peut être facilement étendu à l'aide de l'API complète.
48.Tooltipster
Tooltipster est un plugin jQuery permettant de créer rapidement une validation HTML5 et des info-bulles flexibles. Ce plug-in appartient au type "petit mais complet". Il ne fait que 4,8 Ko après compression, mais il fonctionne très rapidement et peut être facilement personnalisé. Son apparence peut être modifiée à l'aide de CSS (support de thème) et de flèches, et des effets d'apparence tels que des changements suivant la position de la souris et des délais peuvent être définis.
49.FitText
FitText est un plug-in jQuery très simple mais puissant qui peut être utilisé pour garantir que le texte s'adapte aux éléments définis. Il met automatiquement à jour la taille de la police en fonction de la largeur de l'élément qui l'entoure et garantit que la mise en page n'est pas trop fragmentée (en raison de la taille de la police), même si la page est affichée dans un navigateur de bureau ou mobile. En outre, le plugin offre certaines options de réglage fin, notamment la possibilité de définir une « mise à l'échelle horizontale » et des dimensions minimales à maximales.
50.
