jquery動(dòng)畫3.創(chuàng)建一個(gè)帶遮罩效果的圖片走廊

更新時(shí)間：2012年08月24日 11:11:22 作者：

今天我們要完成的是一個(gè)帶有遮罩效果（補(bǔ)間動(dòng)畫）的圖片走廊jquery插件：jquery.tranzify.js

 
#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插件如何制作，該部分以講解為主，插件的詳細(xì)代碼和如何使用，還是參照demo。
　　第一步是搭建插件的骨架：

復(fù)制代碼代碼如下:

 
(function ($) { 
$.tranzify = { 
defaults: { //默認(rèn)配置 
transitionWidth: 40, //遮罩層每一小片段的寬度 
transitionHeight: '100%', //遮罩層每一小片段高度 
containerID: 'overlay', //遮罩層id 
transitionType: 'venetian',//默認(rèn)遮罩層動(dòng)畫效果 
prevID: 'prev',//上一條導(dǎo)航ID 
nextID: 'next',//下一條導(dǎo)航ID 
visibleClass: 'visible' //可見性class 
}, 
//插件初始化操作 
createUI: function (config) { 
}, 
//創(chuàng)建遮罩層 
createOverlay: function (config) { 
}, 
//運(yùn)行動(dòng)畫效果 
runTransition: function (config) { 
} 
}; 
$.fn.extend({ 
//創(chuàng)建插件函數(shù) 
tranzify: function (options) {return this; 
} 
}); 
})(jQuery); 

基本骨架有了，我們先來實(shí)現(xiàn)插件函數(shù)tranzify的實(shí)現(xiàn)。代碼還是很簡(jiǎn)單的，就是獲取當(dāng)前的dom對(duì)象，對(duì)其創(chuàng)建相關(guān)html元素和相應(yīng)事件，最后把this返回回去，實(shí)現(xiàn)鏈?zhǔn)侥Ｊ?，代碼如下：

復(fù)制代碼代碼如下:

 
//創(chuàng)建插件函數(shù) 
tranzify: function (options) { 
　　//擴(kuò)展配置 
　　var config = $.extend($.tranzify.defaults, options); 
　　//獲取當(dāng)前dom對(duì)象，傳給config.selector 
　　config.selector = "#" + this.attr('id'); 
　　//計(jì)算出我們需要?jiǎng)?chuàng)建的遮罩層片段數(shù) 
　　config.multi = parseInt(this.width()) / config.transitionWidth; 
　　//創(chuàng)建插件 
　　$.tranzify.createUI(config); 
　　//返回對(duì)象本身，實(shí)現(xiàn)鏈?zhǔn)叫Ч?
　　return this; 
} 

　接下來我們介紹createUI函數(shù)。首先獲取圖片總數(shù)：

復(fù)制代碼代碼如下:

var imgLength = $(config.selector).find('img').length,

接下來定義‘上一條'和‘下一條'導(dǎo)航，并添加到selector對(duì)象上。

復(fù)制代碼代碼如下:

 
prevA = $('<a></a>', { 
id: config.prevID, 
href: '#', 
html: '&laquo;', 
click: function (e) { 
e.preventDefault(); 
//隱藏導(dǎo)航 
$(config.selector).find('a').css('display', 'none'); 
//創(chuàng)建遮罩 
$.tranzify.createOverlay(config); 
//獲取當(dāng)前顯示狀態(tài)的圖片 
var currImg = $('.' + config.visibleClass, $(config.selector)); 
//當(dāng)前圖片不是第一張圖片 
if (currImg.prev().filter('img').length > 0) { 
//將上一張圖片設(shè)置為可顯示狀態(tài) 
currImg.removeClass(config.visibleClass).prev().addClass(config.visibleClass); 
} else { 
//設(shè)置最后一張圖片為可顯示狀態(tài) 
currImg.removeClass(config.visibleClass); 
$(config.selector).find('img').eq(imgLength - 1).addClass(config.visibleClass); 
} 
//運(yùn)行遮罩效果 
$.tranzify.runTransition(config); 
} 
}).appendTo(config.selector), 
nextA = $('<a></a>', { 
id: config.nextID, 
href: '#', 
html: '&raquo;', 
click: function (e) { 
e.preventDefault(); 
//隱藏導(dǎo)航 
$(config.selector).find('a').css('display', 'none'); 
//創(chuàng)建遮罩 
$.tranzify.createOverlay(config); 
//獲取當(dāng)前顯示狀態(tài)的圖片 
var currImg = $('.' + config.visibleClass, $(config.selector)); 
//當(dāng)前圖片不是最后一張圖片 
if (currImg.next().filter('img').length > 0) { 
//將下一張圖片設(shè)置為可顯示狀態(tài) 
currImg.removeClass(config.visibleClass).next().addClass(config.visibleClass); 
} else { 
//設(shè)置第一張圖片為可顯示狀態(tài) 
currImg.removeClass(config.visibleClass); 
$(config.selector).find('img').eq(0).addClass(config.visibleClass); 
} 
//運(yùn)行遮罩效果 
$.tranzify.runTransition(config); 
} 
}).appendTo(config.selector); 

最后別忘記把第一張圖片設(shè)置為顯示狀態(tài)。

復(fù)制代碼代碼如下:

$(config.selector).find('img').eq(0).addClass(config.visibleClass);

　　下面介紹創(chuàng)建遮罩層的代碼。主要思路是：創(chuàng)建一組div，div的背景就是當(dāng)前顯示的圖片，通過設(shè)置各個(gè)div css的left值，背景的backgroundPosition值，使這組div組成一個(gè)完整的圖片效果。還是看代碼吧，一看就一目了然了。

復(fù)制代碼代碼如下:

 
//div left的偏移量 
var posLeftMarker = 0, 
//div 背景position的偏移量 
bgHorizMarker = 0, 
//遮罩層總的包裝對(duì)象 
overlay = $('<div></div>', { 
id: config.containerID 
}); 
//循環(huán)，確定需要?jiǎng)?chuàng)造的片段數(shù) 
for (var i = 0; i < config.multi; i++) { 
//創(chuàng)造片段，每個(gè)片段只包含當(dāng)前顯示圖片的一部分圖片 
$('<div></div>', { 
//設(shè)置寬度 
width: config.transitionWidth, 
//設(shè)置高度 
height: config.transitionHeight, 
css: { 
//設(shè)置背景圖片，來源就是當(dāng)前處于顯示狀態(tài)的圖片 
backgroundImage: 'url(' + $('.' + config.visibleClass, $(config.selector)).attr('src') + ')', 
//設(shè)置背景圖片大小，讓他們和外部容器高度、寬度一致。 
//這樣無論你圖片的大小，都會(huì)和容易大小匹配 
backgroundSize: $(config.selector).width() + 'px ' + $(config.selector).height() + 'px', 
//設(shè)置背景偏移量 
backgroundPosition: bgHorizMarker + 'px 0', 
//設(shè)置left值 
left: posLeftMarker, 
top: 0 
} 
}).appendTo(overlay);//添加到遮罩層容器 
//重新計(jì)算偏移量 
bgHorizMarker -= config.transitionWidth; 
posLeftMarker += config.transitionWidth; 
} 
//遮罩層容器添加到頁(yè)面 
overlay.insertBefore('#' + config.prevID); 

ok，只剩運(yùn)行遮罩層的代碼了。這段代碼也很簡(jiǎn)單，就是獲取遮罩層容易下面的各個(gè)div，對(duì)他們添加動(dòng)畫效果，逐個(gè)讓他們的高度或者寬度變?yōu)?，等整個(gè)動(dòng)畫結(jié)束后，移出遮罩層容器。

復(fù)制代碼代碼如下:

 
//獲取遮罩層容器 
var transOverlay = $('#' + config.containerID), 
//獲取遮罩層容器下各div 
transEls = transOverlay.children(), 
len = transEls.length - 1; 
//根據(jù)配置運(yùn)行不懂得動(dòng)畫效果 
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; 
} 