Web 开发最有用的 jQuery 插件集锦
一、Responsive SlideShow——图片滑块展示
1、Responsive Carousel
responsive-carousel 是一个内容传送带插件,支持鼠标、触摸和键盘操作。默认包含 slide/drag 过渡特效,你也通过 data 属性应用以及包含额外的 CSS 样式。
在源文件夹里还包含其它的扩展,例如翻转和淡入淡出的过渡效果,自动播放,分页等等。使用示例:
<script src="jquery.js"></script> <script src="dist/responsive-carousel.min.js"></script> <link href="src/responsive-carousel.css" rel="stylesheet"> <link href="src/responsive-carousel.slide.css" rel="stylesheet"><div class="carousel" data-transition="slide"><div><!-- carousel item content here --></div><div><!-- carousel item content here --></div> </div>
插件下载 效果演示
2、Sequence.js
这是一款动画效果很抢眼的响应式内容滑动插件,主要特色:使用 CSS3 过渡特效、触屏设备、跨浏览器以及响应式布局。
本身无内置的主题,可以根据需要完全自定义。主题示例:
- Modern Slide In
- Modern Slide In (with hashTags enabled)
- Sliding Horizontal Parallax
- Apple Style
- Basic Slide
- Basic Crossfade
- Documentation Demo
插件下载 效果演示
3、Fresco
Fresco 是一款响应式的灯箱插件,它可以被用来创建令人惊叹的遮罩效果。它配备了全屏播放,支持视网膜显示的主题以及强大的 JavaScript API。
插件下载 效果演示
4、BookBlock: A Content Flip Plugin
BookBlock 这款插件可用于创建精美的小册子风格效果,支持“翻页”模式的导航,可以用于显示任何内容,如图像、文本和视频等待。
<div id="bb-bookblock" class="bb-bookblock"><div class="bb-item"><!-- custom content --></div><div class="bb-item"><!-- ... --></div><div class="bb-item"><!-- ... --></div><div class="bb-item"><!-- ... --></div> </div> $(function() { $( '#bb-bookblock' ).bookblock(); });
插件下载 效果演示
5、RSlider
RSlider 是一个全屏的响应式图像和内容滑块,外观设计简洁大方,会根据浏览器的窗口宽度自动调整尺寸。
插件下载 效果演示 (温馨提示:需要FQ访问)
6、ResponsiveSlides.js
压轴的 ResponsiveSlides.js 是一款轻量的 jQuery 插件,用于创建响应的幻灯片。支持下列参数:
$(".rslides").responsiveSlides({auto: true, // Boolean: Animate automatically, true or false,//布尔类型:是否手动切换图片(“auto:false”会自动添加页面标签)speed: 500, // Integer: Speed of the transition, in milliseconds, //整数:幻灯片切换间隔时间,单位是ms timeout: 4000, // Integer: Time between slide transitions, in millisecondspager: false, // Boolean: Show pager, true or falsenav: false, // Boolean: Show navigation, true or falserandom: false, // Boolean: Randomize the order of the slides, true or falsepause: false, // Boolean: Pause on hover, true or falsepauseControls: true, // Boolean: Pause when hovering controls, true or falseprevText: "Previous", // String: Text for the "previous" buttonnextText: "Next", // String: Text for the "next" buttonmaxwidth: "", // Integer: Max-width of the slideshow, in pixels,//整数:幻灯片和图片区域的最大宽度,单位是像素pxnavContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'manualControls: "", // Selector: Declare custom pager navigationnamespace: "rslides", // String: Change the default namespace used,//字符串:修改幻灯片类和id的默认命名空间(比如你想在一个页面添加多个幻灯片时使用)before: function(){}, // Function: Before callbackafter: function(){} // Function: After callback });
插件下载 效果演示
二、网页布局
1、Wookmark
Wookmark 这款 jQuery 插件用于创建一个动态的多列布局。使用示例:
$(
'#myContent li'
).wookmark({offset: 2});
插件下载 效果演示
2、jQuery Scroll Path
jQuery Scroll Path 是一款非常帮的自定义路径滚动插件。使用示例:
$.fn.scrollPath("getPath")// Move to 'start' element.moveTo(400, 50, {name: "start"})// Line to 'description' element.lineTo(400, 800, {name: "description"})// Arc down and line to 'syntax'.arc(200, 1200, 400, -Math.PI/2, Math.PI/2, true).lineTo(600, 1600, {callback: function() {highlight($(".settings"));},name: "syntax"})// Arc and rotate back to the beginning..arc(1300, 50, 900, -Math.PI/2, -Math.PI, true, {rotate: Math.PI*2, name: "end"});// We're done with the path, let's initate the plugin on our wrapper element$(".wrapper").scrollPath({drawPath: true, wrapAround: true});
插件下载 效果演示
3、Flexslider
FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果。这款插件也是 2011 年度最佳 jQuery 插件,今年被 WooThemes 收购并发布了2.0版本,因此继续入选 2012 年度榜单。
主要特色
- ✓ 简单的,语义化的标签;
- ✓ 支持所有主流的浏览器;
- ✓ 水平/垂直滑动和淡入淡出动画;
- ✓ 支持多个滑块,回调 API,以及更多;
- ✓ 触摸滑动支持硬件加速;
- ✓ 能够自定义导航选项。
- ✓ 兼容最新版本的 jQuery。
插件下载 效果演示
4、Elastislide
Elastislide 是一款非常优秀的响应式 jQuery 幻灯片插件,集成了 Touchwipe 插件以支持触屏设备。
提供了四种效果
- ✓ 水平图片传送带
- ✓ 垂直图片传送带
- ✓ 固定在屏幕底部
- ✓ 缩略图形式预览
这款插件也有详细的制作教程,非常详细,可以学习到插件的制作方法。
插件下载 效果演示
5、Slidesjs--responsive
Slides 是一个非常简洁的 jQuery 图片轮播插件,其特点是自动循环播放、图片预加载以及自动分页功能。
使用示例 下载插件 效果演示
- ✓ Images with captions
- ✓ Linking
- ✓ Product
- ✓ Multiple slideshows
- ✓ Simple (unstyled)
- ✓ Standard
6. Responsive Thumbnail Gallery Plugin
这是一款带缩略图功能的幻灯片插件,能够根据父容器的尺寸自适应大小,效果不错。
7、3D Gallery
特别推荐!精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中。
支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效果
插件下载 效果演示
8、Image Transitions
基于 jQuery 和 CSS3 动画实现的图片过渡效果。
共有Flip、Rotation、Multi-flip、Cube、Unfold等6种效果。
这款插件有详细的制作教程可以参考学习。 插件下载 效果演示
9、Zoomooz.js
Zoomooz.js 是一款易于使用的插件,能使任何网页元素放大,支持 3D 转换。使用示例:
$(document).ready(function() {$("#element").click(function(evt) {$(this).zoomTo({targetsize:0.75, duration:600});evt.stopPropagation();}); });
插件下载 效果演示
学习 : http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/
三、jQuery Ajax 分页插件和教程
1.Client-side jQuery pagination plugin : jPages
jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放、按键翻页、延迟加载等等。
浏览详情 在线演示
2. jPaginate: A Fancy jQuery Pagination Plugin
jPaginate 是一款非常精致的分页插件,提供了五种形式的DEMO,支持鼠标悬停翻页功能。
浏览详情 在线演示
3. SimplePager – jQuery paging plugin
SimplePager 是非常简洁的 jQuery 分页插件,用最少的参数配置实现满足需要的分页功能。
浏览详情 在线演示
4. jQuery ScrollPagination
jQuery 滚动翻页插件 由 Anderson Ferminiano 开发,可以在项目中免费使用。
浏览详情 在线演示
5. jqPagination A jQuery pagination plugin
jqPagination 提供了一种新颖的分页方式,用表现当期所处的页码形式取代传统的页码列表模式。
浏览详情 在线演示
6. Extreme Makeover: jPaginator CSS3 Edition
jPaginator 这款分页插件用于改进长翻页列表的用户体验,使用一个滑动条来快速翻页。
浏览详情 在线演示
7. Sausage : jQuery infinite Pagination with Demo
Sausage 是一款非常优秀的分页插件,用于实现页面的无限制滚动分页功能。
浏览详情 在线演示
8. Xarg : Ajax jQuery Pagination
Xarg jQuery 分页插件,有多种分页形式供选择,可以帮助你实现各种需求的分页效果。
浏览详情 在线演示
9. jPaginator: jQuery Pagination Plugin
jPaginator 是一款非常轻量的 jQuery 分页插件,也非常有特色,提供了方便使用的滑动翻页功能。
浏览详情 在线演示
10. jQuery Pagination Plugin
这款分页插件虽然效果简洁,但是是学习 jQuery 翻页功能非常好的例子。
浏览详情 在线演示
11. Sweet Pages: A jQuery Pagination Solution
Sweet Pages 是效果非常精美的一款分页插件,效果有点类似于幻灯片的翻页。
浏览详情 在线演示
12. AJAX Pagination using jQuery and PHP with Animation
最后推荐的这款 jQuery 分页插件拥有充满吸引力的动画效果,相信你会喜欢的。
浏览详情 在线演示
转载于:https://www.cnblogs.com/JoannaQ/archive/2013/05/05/3060545.html
Web 开发最有用的 jQuery 插件集锦相关推荐
- 对于 Web 开发很有用的 jQuery 效果制作教程
如果你的项目中需要响应式滑块,炫丽的图片呈现,对话框提示,轻巧动画等效果,jQuery 是完美的解决方案.凭借这个快速,易用的 JavaScript 库,可以轻松处理语言之间的交互,它给人最快速的 W ...
- Web设计和开发人员有用的15Chrome插件
1.Aviary Screen Capture屏幕截图 Aviary Screen Capture让你能够截取网页的屏幕快照.获得屏幕快照后,用Aviary.com的应用程序在浏览器内编辑那幅快照.基 ...
- 2011年的32有用的jQuery插件
jQuery插件真正为开发人员很有帮助,今天分享的插件有很多你没有见到过的,但是非常实用的.这32个有用的的插件对你的开发很有帮助.如果你喜欢这些jQuery插件,记得收藏, JQUERY插件 jRu ...
- jQuery:收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
- Web开发人员有用的代码比较工具
许多不同的语言的开发人员都有着同样的头疼问题.测试不同版本的源代码之间差异,在整个开发的职业生涯将是一个恼人的问题,但很少考虑的问题是在编写和编辑从相同的源的两个或多个子版本本的合并时如何来更快的发现 ...
- 七个帮助你处理Web页面层布局的jQuery插件
1.UI.Layout jQuery UI布局插件 官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局.布局可 ...
- Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
http://www.cnblogs.com/lhb25/p/50-jquery-plugins-f.html http://www.cnblogs.com/lhb25/p/must-read-lin ...
- Jquery学习总结(4)——高效Web开发的10个jQuery代码片段
在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库.今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来. 1.检测Internet ...
- 关于java web开发中的很多小问题集锦
1.导出excel文件,文件名的中文问题 public static void setFileDownloadHeader(HttpServletRequest request, HttpServle ...
最新文章
- Linux之文件权限管理
- Haha!Sniffer Pro终于可以用啦~
- 谈javascript变量声明
- 015_视图(Views)
- rancher k8s docker 关系_通过rancher部署k8s过程实战分享
- 又一次生产 CPU 高负载排查实践
- 区块链分叉如何解决_什么是分叉区块链又该如何分叉
- mysql8修改密码
- rhcsa第二天笔记
- 图像形态学运算之腐蚀-膨胀篇
- 人工智能之殇——AI项目为何屡战屡败?
- Java中的七种设计原则
- 【MockJS】使用MockJS模拟数据 (超级详细)
- Allegro_Outline,RouteKeepin倒圆角
- 微信小程序实现首页图片多种排版布局!
- unity3d android存储文件,Unity3d资源写入Android内置存储卡
- SAP物料移动科目确认由浅入深无敌大解析
- MATLAB调整为护眼模式
- 2021高考成绩查询激动,2021高考成绩几天公布 什么时候可以查分
- 锐捷VSU配置实例(附拓扑图)
热门文章
- C++ STL 之 map
- 第一行代码读书笔记1+常见错误分析
- 使用 Code Snippet 简化 Coding
- WorldWind Java 版学习:8、事件响应
- MySQL批量检查表的脚本
- [翻译]ASP.NET AJAX与SharePoint的集成
- 《黑客与画家》读后感:你对技术一无所知(一些金句)
- m_Orchestrate learning system---十八、mo项目的启示是什么
- Microsoft Operations Management Suite 集成 SCO
- mysql replace语句