50 个 jQuery 插件可将你的网站带到另外一个高度 【已翻译100%】

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

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

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

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

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

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

image

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

2. Tagging JS

image

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

3. Scroll Magic

image

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

32. jPages : JavaScript Powered Pagination

image

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

image

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

6. Wholly

image

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

**7. MixitUp
**
image

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

8. Velocity.js

image

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

9. rowGrid

image

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

10. Croppic

image

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

11. ImageLightbox.js

image

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

12. jQuery Tip Cards

image

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

13. Floatlable.js

image

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

14. Nanogallery

image

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

15. jQuery Panorma Viewer

image

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

16. SVG Magic

image

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值