Web 开发最有用的50款 jQuery 插件集锦——《综合篇》

　　这篇文章是《Web 开发最有用的50款 jQuery 插件集锦》系列的最后一篇，整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery 插件，这些插件按用途主要有以下类别：网页布局插件，导航插件，表格插件，滑块和转盘插件，图表插件，图片特效插件，视频插件等等，系列其它文章列表如下：

您可能感兴趣的相关文章

50款最有用的 jQuery 插件集锦《表单篇》

50款最有用的 jQuery 插件集锦《图片特效篇》

50款最有用的 jQuery 插件集锦《网页布局篇》

50款最有用的 jQuery 插件集锦《内容滑块篇》

50款最有用的 jQuery 插件集锦《网站导航篇》

50款最有用的 jQuery 插件集锦《图标排版篇》

Swipebox

　　Swipebox 是一款可触摸的 jQuery 灯箱效果插件，可用于桌面，移动和平板电脑。

　　支持移动设备滑动手势导航，桌面电脑上可以用键盘导航，不支持 CSS3 过渡特性的浏览器使用 jQuery 降级处理，支持视网膜显示，能够通过 CSS 轻松定制。

　　使用示例：

$("#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 标签，这意味着您可以在提示层里插入图像和文本格式标记之类的东西。

　　效果可以自由定制，默认参数如下：

$('.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 效果使用示例：

$("#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 效果使用示例：

$("#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 这款插件效果特别炫丽！可以轻松实现通知，提醒，成功、错误或者警告提示，确认提示等等，效果十分丰富，可以自定义文本、动画、速度以及按钮。

　　默认参数配置如下：

$.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 来提供地图功能。

　　示例代码：

<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 可以很容易地在网站中实现填充的背景视频。它可以用于播放无声的环境背景视频，或者一系列的影片，你也可以用它来显示目前流行的网站大背景图像功能。

　　创建一个铺满整个浏览器窗口的视频：

$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
});

　　在 Firefox 浏览器中，可以配置显示 Ogg 格式视频：

$(function() {
var BV = new $.BigVideo({useFlashForFirefox:false});
BV.init();
BV.show('vids/river.mp4', {altSource:'vids/river.ogv'});
});

　　如果是背景视频，则如下配置：

$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});
});

　　插件下载 效果演示

Calendario

　　Calendario 是一个灵活的日历插件，用于实现响应式的布局。其目的是在小屏幕和大屏幕，提供一个合适的布局让日历尽可能保持流体结构。这款插件来自 Codrops，有详细的制作教程可以参考学习：《Calendario: A Flexible Calendar Plugin》。

　　插件下载 效果演示

您可能感兴趣的相关文章

60款非常酷的 jQuery 幻灯片演示和下载

15个款优秀的 jQuery 图片特效插件推荐

几款优秀的 jQuery Ajax 分页插件和教程

Web开发者必备的20款超赞 jQuery 插件

分享23款美轮美奂的 jQuery 图片特效插件

　　

本文链接：网站开发最有用的50款 jQuery 插件集锦——综合篇

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源