今天我們要完成的是一個帶有遮罩效果（補間動畫）的圖片走廊jquery插件：jquery.tranzify.js。我們先看下效果：
好了，現在我們開始講解這個jquery動畫插件如何制作，大家可以再文章最后下載demo，查看詳細代碼。
首先開始准備html頁面，代碼很簡單就是一個id為frame的div，里面包含了一些圖片。
<div id="frame"> <img id="image1" src="img/amstrad.jpg" alt="Amstrad CPC 472" /> <img id="image2" src="img/atari.jpg" alt="Atari TT030" /> <img id="image3" src="img/commodore16.jpg" alt="Commodore 64" /> <img id="image4" src="img/commodore128.jpg" alt="Commodore 128" /> <img id="image5" src="img/spectrum.jpg" alt="Sinclair ZX Spectrum +2" /> <img id="image6" src="img/msld.jpg" alt="msld" /> </div>
接下來我們創建相應的css樣式文件，為了方便管理，我們存放在一個單獨的css文件中：jquery.tranzify.css。該樣式表定義了frame的樣式，圖片隱藏和顯示的樣式，上一條/下一條導航的樣式，遮罩層的樣式。
#frame { position: relative; width: 700px; height: 400px; overflow: hidden; z-index: 0; } #frame img { width: 700px; height: 400px; position: absolute; top: 0; left: 0; z-index: 1; } #frame img.visible { z-index: 2; } #frame a { display: block; width: 50%; height: 100%; position: absolute; top: 0; z-index: 10; color: transparent; background-image: url(transparent.gif); filter: alpha(opacity = 0); text-align: center; text-decoration: none; font: 90px "Palatino Linotype" , "Book Antiqua" , Palatino, serif; line-height: 400%; } #frame a:hover { color: #fff; text-shadow: 0 0 5px #000; filter: alpha(opacity = 100); filter: Shadow(Color=#000, Direction=0); } #frame a:focus { outline: none; } #prev { left: 0; } #next { right: 0; } #overlay { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 3; } #overlay div { position: absolute; }
接下來介紹jquery.tranzify.js插件如何制作，該部分以講解為主，插件的詳細代碼和如何使用，還是參照demo。
第一步是搭建插件的骨架：
(function ($) { $.tranzify = { defaults: { //默認配置 transitionWidth: 40, //遮罩層每一小片段的寬度 transitionHeight: '100%', //遮罩層每一小片段高度 containerID: 'overlay', //遮罩層id transitionType: 'venetian',//默認遮罩層動畫效果 prevID: 'prev',//上一條導航ID nextID: 'next',//下一條導航ID visibleClass: 'visible' //可見性class }, //插件初始化操作 createUI: function (config) { }, //創建遮罩層 createOverlay: function (config) { }, //運行動畫效果 runTransition: function (config) { } }; $.fn.extend({ //創建插件函數 tranzify: function (options) {return this; } }); })(jQuery);
基本骨架有了，我們先來實現插件函數tranzify的實現。代碼還是很簡單的，就是獲取當前的dom對象，對其創建相關html元素和相應事件，最后把this返回回去，實現鏈式模式，代碼如下：
//創建插件函數 tranzify: function (options) { //擴展配置 var config = $.extend($.tranzify.defaults, options); //獲取當前dom對象，傳給config.selector config.selector = "#" + this.attr('id'); //計算出我們需要創建的遮罩層片段數 config.multi = parseInt(this.width()) / config.transitionWidth; //創建插件 $.tranzify.createUI(config);
//返回對象本身，實現鏈式效果 return this; }
接下來我們介紹createUI函數。首先獲取圖片總數：
var imgLength = $(config.selector).find('img').length,
接下來定義‘上一條’和‘下一條’導航，並添加到selector對象上。
prevA = $('<a></a>', {
id: config.prevID,
href: '#',
html: '«',
click: function (e) {
e.preventDefault();
//隱藏導航
$(config.selector).find('a').css('display', 'none');
//創建遮罩
$.tranzify.createOverlay(config);
//獲取當前顯示狀態的圖片
var currImg = $('.' + config.visibleClass, $(config.selector));
//當前圖片不是第一張圖片
if (currImg.prev().filter('img').length > 0) {
//將上一張圖片設置為可顯示狀態
currImg.removeClass(config.visibleClass).prev().addClass(config.visibleClass);
} else {
//設置最后一張圖片為可顯示狀態
currImg.removeClass(config.visibleClass);
$(config.selector).find('img').eq(imgLength - 1).addClass(config.visibleClass);
}
//運行遮罩效果
$.tranzify.runTransition(config);
}
}).appendTo(config.selector),
nextA = $('<a></a>', {
id: config.nextID,
href: '#',
html: '»',
click: function (e) {
e.preventDefault();
//隱藏導航
$(config.selector).find('a').css('display', 'none');
//創建遮罩
$.tranzify.createOverlay(config);
//獲取當前顯示狀態的圖片
var currImg = $('.' + config.visibleClass, $(config.selector));
//當前圖片不是最后一張圖片
if (currImg.next().filter('img').length > 0) {
//將下一張圖片設置為可顯示狀態
currImg.removeClass(config.visibleClass).next().addClass(config.visibleClass);
} else {
//設置第一張圖片為可顯示狀態
currImg.removeClass(config.visibleClass);
$(config.selector).find('img').eq(0).addClass(config.visibleClass);
}
//運行遮罩效果
$.tranzify.runTransition(config);
}
}).appendTo(config.selector);
最后別忘記把第一張圖片設置為顯示狀態。
$(config.selector).find('img').eq(0).addClass(config.visibleClass);
下面介紹創建遮罩層的代碼。主要思路是：創建一組div，div的背景就是當前顯示的圖片，通過設置各個div css的left值，背景的backgroundPosition值，使這組div組成一個完整的圖片效果。還是看代碼吧，一看就一目了然了。
//div left的偏移量 var posLeftMarker = 0, //div 背景position的偏移量 bgHorizMarker = 0, //遮罩層總的包裝對象 overlay = $('<div></div>', { id: config.containerID }); //循環，確定需要創造的片段數 for (var i = 0; i < config.multi; i++) { //創造片段，每個片段只包含當前顯示圖片的一部分圖片 $('<div></div>', { //設置寬度 width: config.transitionWidth, //設置高度 height: config.transitionHeight, css: { //設置背景圖片，來源就是當前處於顯示狀態的圖片 backgroundImage: 'url(' + $('.' + config.visibleClass, $(config.selector)).attr('src') + ')', //設置背景圖片大小，讓他們和外部容器高度、寬度一致。 //這樣無論你圖片的大小，都會和容易大小匹配 backgroundSize: $(config.selector).width() + 'px ' + $(config.selector).height() + 'px', //設置背景偏移量 backgroundPosition: bgHorizMarker + 'px 0', //設置left值 left: posLeftMarker, top: 0 } }).appendTo(overlay);//添加到遮罩層容器 //重新計算偏移量 bgHorizMarker -= config.transitionWidth; posLeftMarker += config.transitionWidth; } //遮罩層容器添加到頁面 overlay.insertBefore('#' + config.prevID);
ok， 只剩運行遮罩層的代碼了。這段代碼也很簡單，就是獲取遮罩層容易下面的各個div，對他們添加動畫效果，逐個讓他們的高度或者寬度變為0，等整個動畫結束后，移出遮罩層容器。
//獲取遮罩層容器 var transOverlay = $('#' + config.containerID), //獲取遮罩層容器下各div transEls = transOverlay.children(), len = transEls.length - 1; //根據配置運行不懂得動畫效果 switch (config.transitionType) { case 'venetian': transEls.each(function (i) { transEls.eq(i).animate({ width: 0 }, 'slow', function () { if (i === len) { transOverlay.remove(); $(config.selector).find('a').css('display', 'block'); } }); }); break; case 'strip': var counter = 0; function strip() { transEls.eq(counter).animate({ height: 0 }, 150, function () { if (counter === len) { transOverlay.remove(); $(config.selector).find("a").css("display", "block"); } else { counter++; strip(); } }); } strip(); break; }
好了，內容講完了，把代碼拼接起來就可以運行最終效果了。希望這篇文章對你有幫助。
demo下載地址：jQuery.animation.tranzify.zip