本文汇总了50款jQuery插件，覆盖了网页布局、导航、表格、滑块、图表、图片特效、视频等多种应用场景，提供了从基本到高级的开发工具集合。
这篇文章是《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
=
"width: 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》。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
