这篇文章是《Web 开发最有用的50款 jQuery 插件集锦》系列的最后一篇，整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery插件，这些插件按用途主要有以下类别：网页布局插件，导航插件，表格插件，滑块和转盘插件，图表插件，图片特效插件，视频插件等等，系列其它文章列表如下：
Swipebox
Swipebox 是一款可触摸的 jQuery 灯箱效果插件，可用于桌面，移动和平板电脑。
支持移动设备滑动手势导航，桌面电脑上可以用键盘导航，不支持 CSS3 过渡特性的浏览器使用 jQuery 降级处理，支持视网膜显示，能够通过 CSS 轻松定制。
使用示例：
|
1
2
3
4
5
6
7
|
$("#gallery").click(function(e){ e.preventDefault(); $.swipebox([ {href:'big/image1.jpg', title:'My Caption'}, {href:'big/image2.jpg', title:'My Second Caption'} ]);}); |
Tooltipster
Tooltipster 是一款轻量的，易于使用的 jQuery 插件，使您可以轻松创建语义化，现代化的工具提示。Tooltipster 允许您在提示内容中使用任何你能想到的 HTML 标签，这意味着您可以在提示层里插入图像和文本格式标记之类的东西。
效果可以自由定制，默认参数如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
$('.tooltip').tooltipster({ animation: 'fade', arrow: true, arrowColor: '', content: '', delay: 200, fixedWidth: 0, maxWidth: 0, functionBefore: function(origin, continueTooltip) { continueTooltip(); }, functionReady: function(origin, tooltip) {}, functionAfter: function(origin) {}, icon: '(?)', iconDesktop: false, iconTouch: false, iconTheme: '.tooltipster-icon', interactive: false, interactiveTolerance: 350, offsetX: 0, offsetY: 0, onlyOne: true, position: 'top', speed: 350, timer: 0, theme: '.tooltipster-default', touchDevices: true, trigger: 'hover', updateAnimation: true}); |
jQuery Transit
Transit 用于实现超平滑的 CSS3 过渡和变换动画效果。借助这款插件，你可以轻松实现 translate、rotate、scale 和 skew 等众多效果。
Transform 效果使用示例：
|
1
2
3
4
5
6
7
8
9
10
11
|
$("#box").css({ x: '30px' }); // Move right$("#box").css({ y: '60px' }); // Move down$("#box").css({ translate: [60,30] }); // Move right and down$("#box").css({ rotate: '30deg' }); // Rotate clockwise$("#box").css({ scale: 2 }); // Scale up 2x (200%)$("#box").css({ scale: [2, 1.5] }); // Scale horiz and vertical$("#box").css({ skewX: '30deg' }); // Skew horizontally$("#box").css({ skewY: '30deg' }); // Skew vertical$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation$("#box").css({ rotateY: 30 });$("#box").css({ rotate3d: [1, 1, 0, 45] }); |
Transition 效果使用示例：
|
1
2
3
4
5
6
|
$("#box").transition({ opacity: 0.1, scale: 0.3 });$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500); // duration$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast'); // easing$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in'); // duration+easing$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..}); // callback$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..}); // everything |
noty
noty 这款插件效果特别炫丽！可以轻松实现通知，提醒，成功、错误或者警告提示，确认提示等等，效果十分丰富，可以自定义文本、动画、速度以及按钮。
默认参数配置如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$.noty.defaults = { layout: 'top', theme: 'defaultTheme', type: 'alert', text: '', dismissQueue: true, // If you want to use queue feature set this true template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>', animation: { open: {height: 'toggle'}, close: {height: 'toggle'}, easing: 'swing', speed: 500 // opening & closing animation speed }, timeout: false, // delay for closing event. Set false for sticky notifications force: false, // adds notification to the beginning of queue when set to true modal: false, maxVisible: 5, // you can set max visible notification for dismissQueue true option closeWith: ['click'], // ['click', 'button', 'hover'], buttons: false // an array of buttons}; |
jQuery Vector Maps
JQVMap 是一款实用的地图插件，在现代浏览器（Firefox, Safari, Chrome, Opera and Internet Explorer 9）中使用可伸缩矢量图形技术（SVG）来显示地图，低版本的 IE（Internet Explorer 6-8）使用 VML 来提供地图功能。
示例代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script src="js/jquery.vmap.js"></script><script src="js/jquery.vmap.world.js"></script><script src="js/jquery.vmap.sampledata.js"></script> <script>jQuery('#vmap').vectorMap({ map: 'world_en', backgroundColor: null, color: '#ffffff', hoverOpacity: 0.7, selectedColor: '#666666', enableZoom: true, showTooltip: true, values: sample_data, scaleColors: ['#C8EEFF', '#006491'], normalizeFunction: 'polynomial'});</script> <div id="vmap" style=" 600px; height: 400px;"></div> |
BigVideo.js
BigVideo.js 可以很容易地在网站中实现填充的背景视频。它可以用于播放无声的环境背景视频，或者一系列的影片，你也可以用它来显示目前流行的网站大背景图像功能。
创建一个铺满整个浏览器窗口的视频：
|
1
2
3
4
5
|
$(function() { var BV = new $.BigVideo(); BV.init();}); |
在 Firefox 浏览器中，可以配置显示 Ogg 格式视频：
|
1
2
3
4
5
|
$(function() { var BV = new $.BigVideo({useFlashForFirefox:false}); BV.init(); BV.show('vids/river.mp4', {altSource:'vids/river.ogv'});}); |
如果是背景视频，则如下配置：
|
1
2
3
4
5
|
$(function() { var BV = new $.BigVideo(); BV.init();}); |
Calendario
Calendario 是一个灵活的日历插件，用于实现响应式的布局。其目的是在小屏幕和大屏幕，提供一个合适的布局让日历尽可能保持流体结构。这款插件来自 Codrops，有详细的制作教程可以参考学习：《Calendario: A Flexible Calendar Plugin》。