jquery動畫3.建立一個有遮罩效果的圖片走廊_jquery

prevA = $('', {
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 {
//設定最後一張圖片為可顯示狀態
$(config.selector).find('img').eq(imgLength - 1).addClass(config.visibleClass);
}
/ /運行遮罩效果
$.tranzify.runTransition(config);
}
}).appendTo(config.selector),
nextA = $('' , {
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(' ).eq(0).addClass(config.visibleClass);

//div left的偏移量


//div left的偏移量
var posLeftMarker = 0,
//div 背景position的偏移
bgHorizMarker = 0,
//遮罩層總的包裝物件
overlay = $(' ', {
id: config.containerID
});
//循環，決定需要創造的片段數
for (var i = 0; i //創造片段，每個片段只包含目前顯示圖片的部分圖片
$('', {
//設定寬度
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
}
}). ;//加入遮罩層容器
//重新計算偏移量
bgHorizMarker -= config.transitionWidth;
posLeftMarker = config.transitionWidth;
}
//遮罩層容器加入到頁面
overlay.insertBefore('#' config.prevID);

//取得遮罩層容器
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;
}