$(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
您可能感兴趣的文章: