jquery动画3.创建一个带遮罩效果的图片走廊

#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