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

複製程式碼如下程式碼：

#frame
{
positionion>position >寬度：700px;
高度：400px;
溢位：隱藏；
z 索引：0;
}
#frame img
{
寬度：700ppx; 高度：400px;
位置：絕對;
上：0;
左：0;
z 索引：1;
}
#frame img.visible
{
z-index: 2;
}
#frame a
{
顯示：塊；
寬度：50%;
高度：100%；
位置：絕對；
頂部：0;
z 索引：10;
顏色：透明；
背景圖片：url(transparent.gif);
濾鏡：alpha（不透明度= 0 );
文字對齊：居中；
文字裝飾：無；
字體：90px「Palatino Linotype」、「Book Antiqua」、Palatino、襯線；
排高：400%；
}
#frame a:hover
{
顏色：#fff;
文字陰影：0 0 5px #000;
濾鏡：alpha（不透明度= 100）；
濾鏡：陰影（顏色=#000，方向=0）；
}
#frame a:焦點
{
大綱：無;
}
#prev
大綱：無;
}
#prev
大綱：無;
}
#prev
大綱：無;
}
#prev
大綱：無;
}
#prev
大綱>{
左：0;
}
#下一個
{
右：0;
}
#overlay
{
寬度：100% ;
高度：100%；

位置：絕對;
左：0;
頂：0;
z 索引：3;

} #overlay div { 位置：絕對； }

接下來介紹jquery.tranzify.js 插件如何製作，該部分以講解為主，插件的詳細程式碼和如何使用，參考或demo。

第一步是建立外掛程式的重建：




複製程式碼


程式碼如下：



程式碼如下：



(function ($) {
$.tranzify = {
defaults: { //預設設定
transitionWidth: 40, //遮罩層每一小片的寬度
transitionHeight: '100% ', //遮罩層每一層小禮服高度
containerID: 'overlay', //遮罩層id
transitionType: 'venetian',//預設遮罩層動畫效果
prevID: 'prev',//上一條導航ID
nextID: 'next',//下一條導航ID
visibleClass: 'visible' //可視性類別
},
//插件初始化操作
createUI: function (config) {

},
//建立遮罩層
createOverlay: function (config) {

}, //執行動畫效果runTransition: function (config) { } }; $.fn.extend({ //建立外掛程式

tranzify: function (options) {return this

}
}) ;
})(jQuery);


基本的重構有了，我們先來實作外掛函數tranzify的實作。程式碼還是很簡單的，就是取得目前的dom對象，由此創建相關html元素和對應事件，最後把這個返回，實現鍊式模式，程式碼如下：




複製程式碼


程式碼如下：

/ /建立外掛程式
tranzify: function (options) {

/擴充配置tranzify: function (options) { /擴充配置　/取得目前dom對象，傳給config.selector 　config.selector = "#" this.attr('id') ; // 計算我們需要建立的遮光罩層碎片數

config.multi = parseInt(this.width()) / config.transitionWidth;

/建立外掛程式
/回傳物件本身，實現鍊式效果

}

接下來我們介紹createUI函數。首先取得圖片總數： 複製程式碼

程式碼如下： var imgLength = $(config. selector).find('img').length, 接下來定義'上一條'和'下一條'導航，並加入到selector物件上。 複製程式碼如下：

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，div的背景就是目前顯示的圖片，透過設定各個div css的left值，背景的backgroundPosition值，使這組div組成一個完整的圖片效果。還是看程式碼吧，一看就一目了然了。

複製程式碼 程式碼如下:

//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);

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