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

Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展。在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好的终端用户体验,它们比原来更轻量级,还有更强的处理能力。

关键是这些新发展起来的脚本和插件是能构建响应式Web的,而且还不会丧失它们原有的功能特性——除了更优秀和更轻巧(就文件大小而言)之外,它们还不会增加页面加载的时间。

通过浏览文档,掌握JQuery的语法是很容易的。它可以支持选择DOM元素,创建动画,处理事件,开发Ajax应用,甚至还为开发者提供了基于JavaScript类库之上创建插件的能力。

jQuery架构的开发人员能够创建一个插件代码来扩展其功能,从而能够产生一些最好的插件,让你的网站或任何给定的项目达到一个全新的水平。

在这篇文章中,我们已经积累了一些供你挑选的最佳JQuery插件,这些插件提供了各种的功能和特性能够让你的网页呈现许多可想象到的效果。我们希望你能够在下面的列表中找到你正在寻找的插件。

在下面的评论区域让我们知道哪些插件你以前使用过或者你正在考虑在将来的项目或网站中使用哪些插件。

1. FlickerPlate

Flickerplate-Plugin
Flickerplate是一个可以让你弹出内容的易用jQuery插件。它也依赖Modernizr来进行触碰检测和在触碰事件使用jQuery.Finger库。Flickerplate通过很多种方式配置。你可以通过Javascript调用来设置选项。或者你可以通过在实际的元素上通过data属性设置选项。


 

2. Tagging JS

tagging-js
TaggingJS 是一个用来创建高度可定制的前端标签系统的jQuery插件。它小于3 kb并且支持世界上大部分浏览器。它基于MIT 许可。 

3. Scroll Magic

scroll-magic
ScrollMagic 是一个神奇滚动交互的jQuery插件,ScrollMagic 允许你像进度条一样使用滚动条。如果你想在指定滚动位置启动一个动画,保持和滚动条运动同步动画,并固定一个元素到指定滚动位置(黏性元素),这就是为你而设的插件。

32. jPages : JavaScript Powered Pagination

jpages
jPages 是一个客户端分页脚本(一个jQuery插件),具有像键盘+滚动导航,自动换页,延迟展示和一个可自定义的导航面板的特性。分页元素的任意页数能够插入到相同的页面,并且能够轻易定位。

5. PNotify

p-notify
 
PNotify 是一个由SciActive 开发的 JavaScript的通知插件,曾用名Pines Notify。它的设计理念是提供一个极度灵活而又非常容易实现和使用。它可以提供非阻塞的通知。允许用户在不关闭它的情况下点击通知后面的元素。PNotify 使用了Bootstrap 和 jQuery UI来定义样式,这意味着可以非常容易的对它进行自定义主题样式。

6. Wholly

wholly
Wholly 是一个jQuery的插件用来触发表格列上的mouseenter 和 mouseleave事件。Wholly 用来高亮整个表格列,并且支持表格的colspan和rowspan属性。如果你想要支持colspan和rowspan属性,那么首先你需要构建表格单元格的索引(cell index)。之后,你需要追踪表格所有单元格的事件,找出你感兴趣的,并计算出它们在矩阵中的offset以及共享同一个垂直索引(vertical index)的列。Wholly在设定特定样式方面是没有任何限制的。

7. MixitUp

mixitup
MixItUp 是一个jQuery插件,提供动画过滤和排序。在管理容易归类或者像文件夹一样的有序内容和博客时非常不错,但是也能作为一个吸引人的应用UI和数据可视化的一个强大的工具起作用。


8. Velocity.js

Velocityjs
Velocity是一个jQuery插件,它重新实现了$.animate() 同时包括改善动画流程的新特性 (使得 Velocity也比CSS动画库更快) ,用来产生性能显著的动画。

9. rowGrid

rowgridjs
rowGrid.js是一个小的,轻量级(gzip后大约700 比特)的 jQuery插件,用来在径直的行里放置图片 (或者其他内容项)。网格类似Google图片搜索,flickr,shutterstock 和Google+ 图片的网格。 rowGrid.js 是响应式的,它允许用户无限滑动。所有的内容项拥有相同的高度,但宽度是可变的。

10. Croppic

croppic
Croppic 是一个图片裁切jquery插件。它能提供满足你的需求外更多的功能。 简单上传一张图片,然后你能够按照你喜欢的放大缩小的实际情况来裁剪图片。它需在IE 10+, chrome,和firefox才能正常工作。它使用FormData所以现在不支持IE9和之前的版本。

11. ImageLightbox.js

lightbox
ImageLightbox.js是一个难以置信简单,响应式,触碰友好灯箱效果的脚本。它是由可扩展的,可配置的,极简化的(瘦身后只有4kb),并且使用CSS变形和转换来移动图片。

12. jQuery Tip Cards

tip-cards
Tip Cards 插件允许你创建你在Google Tips页面看到的使用类似卡片交互的cards布局。有几种新的动画选项,所以你可以按你喜欢的进行人性化定制。你可以在模态窗口打开或者关闭的时候,使用回调方法来进行操作。已在像Chrome,Firefox和Safari的桌面现代浏览器测试过。

13. Floatlable.js

float-labels
在Brad Frost写一篇关于浮动标签模式的博客文章后,浮动标签模式取得了成功。这想法是基于Matt D Smith 的 Dribbble Shot。这种模式很容易解释。在用户使用一个输入字段交互时,placeholder的值向上移,并在类型文本上面显示。

14. Nanogallery

nanoGallery
nanoGallery对jQuery来说很容易实现图片画册插件。它具有很多特性:支持触碰,响应式,快速和支持云储存。 相册多级导航,灯箱效果,许多缩略图的hover效果,滑动展示,全屏,分页,图片延迟加载,主题,兼容bootstrap,可定制,可从Flickr/Picasa/Google+拉取照片等等。

15. jQuery Panorma Viewer

jQuery Panorama Viewer
jQuery Panoram Viewer 帮助你在网站内嵌Panorama图片。使用这个插件,你能够在你的网站显示你的Panorama图片。为了做到这些,首先你不得不在你的文档中包含最新的JQuery库和jquery.panorama_viewer.js以及panorama_viewer.css,然后在HTML上给你的图片增加"panorama"类。现代浏览器例如Chrome,Firefox和Safari的桌面和移动版本都已经测试通过。

16. SVG Magic

svgmagic
SVGMagic是一个跨浏览器的兼容JQuery插件,它搜索你网站上的SVG图片,如果浏览器不支持SVG,自动的创建PNG版本。它是简单的,单一目的的插件,不需要配置。

17. BttrLazyLoading

BttrLazyLoading
BttrLazyLoading是个允许你的网页应用在窗口里面只加载图片的jQuery插件。它也允许你在4个不同屏幕尺寸里拥有不同版本的图片。BttrLazyLoading允许你的网页应用延迟加载图片,直到被滚动到图片。这样的方式下,页面加载时间大幅度减少。

18. Remodal

Remodal
Remodal 是一个扁平化,响应式,轻量级,高速,易定制的,声明性状态注释和哈希追踪的模态窗口插件。所有的现代浏览器都支持。你可以轻易地定义模态背景容器(就像一次失焦效果)。

19. Slinky.js

slinkyjs
Slinky.js 是一个用在使用堆叠头部创建滑动导航列表的jQuery插件 。它有无数的特性:就像通过禁用光标事件来平滑滑动,压缩后大约1KB的轻量级,在窗口重调大小和DOM改变上刷新,还有和你喜欢的最新版本的浏览器兼容。

20. Adaptive Backgrounds

adaptive-backgrounds
Adaptive Backgrounds 是一个jQuery插件,用在从图片抽取主要颜色和应用到父元素。这个插件利用了画布元素和ImageData对象,归根于其跨站安全限制,如果某个脚本试图从非当前域名主机抽取图片的颜色将会失败,除非图片允许跨源资源共享。

21. Bigfoot

Bigfoot网页的脚注是烦人的。你点了一个小数字,跳转到页面底部附近,找到你寻找的脚注,然后点击一个链接回到页面原来的地方。Bigfoot看起来让整个处理流程不再痛苦。它自动检测脚注链接和内容,将链接转化成一个容易点击的按钮,当读者点击脚注按钮的时候弹出浮窗(译注:官方演示的版本是直接跳转)。

22. Dynatable

dynatable
Dynatable是一个使用jQuery,HTML5和JSON的,更有趣的,语义化的,交互表格插件。 并且不仅是用在表格上。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松地浏览和操作大数据集。

23. jQuery Label Better

jquery-label-better
jQuery Label Better 就像个优雅动画的老大一样帮助你在表单输入上不占空间地定标签。这个插件最独特的是你需要做的所有工作仅是添加一个占位符的文本,我们将在当用户需要的时候显示标签。



24. Stickup

stickup
stickUp 是一个jQuery 插件。你可以在任意使用jQuery的网页上执行。你可以简单地在任意页面创建任意你想用户在任何时候都可以看见的元素,只要用户滑超它,就会粘到浏览器窗口的顶部。

25. Free Wall

Freewall
Freewall是一个跨浏览器响应式的jQuery插件,它使用很棒的CSS3动画效果和回调事件,能帮你创建很多类型网格布局:可伸缩布局,图片布局,嵌套网格,流式网格, metro风格网格,类品趣志网格。Freewall是个创建桌面,移动和平板的动态网格布局的一体化解决方案。

26. jQuery Interactive 3D

jQuery Interactive 3D
jQuery Interactive 3D是一个允许我们使用多图完成一个类似功能的插件。 使用起来简单,使用简单的函数和指定一组名字的图片。 还有,还拥有定制化的可选项,比如光标图标,速度,支持触屏,自动播放等等。

27. Succinct

succinct
Succinct是一个用作截断多行文本的jQuery小插件。它缩短你的文本到指定的尺寸,并在后面添加省略号。你可以用选择器指定要截断的元素,然后设置你想看到的数量的尺寸参数。


28. SlideMe

slideme
SlideMe!是一个响应式样的,CSS3兼容的jQuery滑动条插件,它同时支持受限的和全屏的视图。它能用在竖屏和横屏, 使用了CSS3转换和支持分页。提供控制滑动的方法(prev, next等),还有它们及更多方法对应的回调方法。

29. Glide.js

glide-jsGlide.js是一个轻量级(压缩后4.5kb)的jQuery插件,用于创建滑块。其具有完全可定制的OOCSS标记及CSS3转换,而且可以回调JavaScript。该滑块是响应式的;其能适应所有的设备并有对触摸的支持。你可以通过键盘、滑动事件、弹窗或箭头菜单来控制元素。Glide.js还有支持所有的事件(播放,暂停,下一步,上一步,等)公共的API。

30. PhotoJShop

photojshop
PhotoJShop是一个允许我们对图像应用简单效果及过滤器的jQuery插件。这些过滤器包括模糊、底片、浮雕、减轻、变黑、黑白、锐化以及更多。插件可以在canvas和图像上工作,并且过滤器很容易使用。

31. One Page Scroll

one page scroll
One Page Scroll是一个jQuery插件,其简化了创建类似网站的难度。它只需要很少的设置,只需要创建HTML结构,调用函数你就已经就绪了。可选的,作为附加功能,其速度和循环行为也可以设置。而且它支持每个页面的SEO友好型URL。

32. FerroSlider

ferroslider
FerroSlider是一个用于创建整页面(或者是内容/图像滑块)等几乎所有类型滑块的jQuery插件。内容可以以灵活的方式放置,水平或垂直,插件都能够使得浏览起来很容易。为提高性能它使用了CSS3变换,能够与响应式布局良好配合且能应用在移动平台上。

33. Scrolld.js

scrolld
Scrolld.js是一个独特的jQuery开源插件。Scrolld.js使用实时更新的数据为像素级布局和导航提供了一个高度精确的滚动。使用Scrolld.js ,你总能精确的滚动到指定目标并且总能提供最好的用户体验。

<h2 id="content_h2_19_10" style="margin: 0

版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将立即给予删除

转载请注明:文章转载自:全分享社区 「http://www.aweb.cc

本文标题:50 个 jQuery 插件可将你的网站带到另外一个高度

本文地址:http://www.aweb.cc/article/detail/id/35.html

下一篇>>高效的jQuery代码编写技巧总结