jqueryアニメーション3.マスクeffect_jqueryを使用して画像コリドーを作成する-jsチュートリアル-php.cn

jqueryアニメーション3.マスクeffect_jqueryを使用して画像コリドーを作成する

WBOY

リリース： 2016-05-16 17:50:34

オリジナル

1017 人が閲覧しました

 
#frame 
{ 
位置: 相対; 
幅: 700ピクセル; 
高さ: 400ピクセル; 
オーバーフロー: 非表示; 
z インデックス: 0; 
} 
#frame img 
{ 
幅: 700px; 
高さ: 400ピクセル; 
位置: 絶対。 
トップ: 0; 
左: 0; 
z インデックス: 1; 
} 
#frame img.visible 
{ 
z-index: 2; 
} 
#frame a 
{ 
表示: ブロック; 
幅: 50%; 
高さ: 100%; 
位置: 絶対。 
トップ: 0; 
z インデックス: 10; 
色: 透明; 
背景画像: url(transparent.gif); 
フィルター: alpha(不透明度 = 0); 
text-align: 中央; 
テキスト装飾: なし。 
フォント: 90px "Palatino Linotype" 、"Book Antiqua" 、Palatino、セリフ; 
行の高さ: 400%; 
} 
#frame a:hover 
{ 
color: #fff; 
テキストシャドウ: 0 0 5px #000; 
フィルター: アルファ(不透明度 = 100); 
フィルター: シャドウ(色=#000、方向=0); 
} 
#frame a:focus 
{ 
アウトライン: なし; 
} 
#prev 
{ 
左: 0; 
} 
#next 
{ 
右: 0; 
} 
#overlay 
{ 
幅: 100%; 
高さ: 100%; 
位置: 絶対。 
左: 0; 
トップ: 0; 
z インデックス: 3; 
} 
#overlay div 
{ 
位置: 絶対; 
} 

次は、jquery.tranzify.js プラグインがどのように作成され、この部分が主、ファイルの详代コードと使用方法を理解するか、参照デモです。これはボストン建插件の骨組み：

复制代代码如下:

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

 

基本フレームワークが備わっているので、最初にコンポーネント関数の実装を実行します。コードは、現在の dom オブジェクトを取得し、それに対して関連する html 要素と関連するイベントを構築し、最後にこれを実行します。返還去，实现链式モード，代码如下：

复制代代码如下:

/ /创建插件関数 
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); 
 //对オブジェクト本身を返す，实现链式效果 
 これを返す; 
} 

 

続いて私が介して UI 関数を作成します。最初に画像の総数を取得します:

复制コード代コード如下:

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

次来定义'上一条'和'

代打代打次のように:

prevA = $('', {
id: config.prevID,
href: '#',
html: '«',
クリック: 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>', {
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 左のオフセット

var posLeftMarker = 0,

//div背景位置のオフセット
bgHorizMarker = 0,
//マスクレイヤーのパッケージ化オブジェクトの合計
overlay = $('

', {
id: config.containerID
});
//ループして、作成する必要があるフラグメントの数を決定します
for (var i = 0; i < config.multi) ; 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: posLeftMarker,
top: 0
}
}) .appendTo(overlay);//マスクレイヤーコンテナに追加
//オフセットを再計算
bgHorizMarker -= config.transitionWidth; posLeftMarker = config.transitionWidth;
}
//マスクレイヤーコンテナをページに追加します
overlay.insertBefore('#' config.prevID);

のみマスクレイヤーを実行するコードは残っています。このコードも非常に単純で、マスクレイヤーの下にあるさまざまな div を取得し、それらにアニメーション効果を追加し、アニメーション全体が完了したら、その高さまたは幅を 1 つずつ 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': 
関数 ストリップ() { 
transEls.eq(counter).animate({ 
高さ: 0 
}, 150, function () { 
if (counter === len) { 
transOverlay.remove(); 
$(config.selector).find( "a").css("表示", "ブロック"); 
カウンター; 
}; >strip(); 
break; 
} 

 
これでコンテンツは終了です。コードを結合して最終的なエフェクトを実行できます。この記事がお役に立てば幸いです。 
 デモのダウンロード アドレス: 
jQuery.animation.tranzify