這篇文章是《Web 開發最有用的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》。
您可能感興趣的相關文章