jquery アニメーション 4. マスク効果を備えたピクチャ コリドーのアップグレード バージョン -- 自動的に実行されるeffect_jquery

主な変更点は次のとおりです。「次へ」および「前へ」クリック イベントを関数 showNext に抽象化します。 setIntervalを追加し、selector要素のhoverイベントを追加します。さて、一つずつ見ていきましょう。
showNext 関数:

コードをコピー コードは次のとおりです:

//表示function
function showNext(flag) {
//ナビゲーションを非表示
$(config.selector).find('a').css('display', 'none');マスクの作成
$.tranzify.createOverlay(config);

//現在の表示ステータスの画像を取得します
var currImg = $('.' config.visibleClass, $(config.selector ));

if (flag === true) {
//現在の画像は最初の画像ではありません
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) ;
}
} else {
//現在の画像は最後の画像ではありません
if (currImg.next().filter('img').length > 0) {
//次の画像を表示可能な状態に設定します
currImg.removeClass(config.visibleClass).next().addClass(config.visibleClass);
} else {
//最初の画像を設定します画像は表示可能です
currImg.removeClass(config.visibleClass);
$(config.selector).find('img').addClass(config.visibleClass);
>}

//マスクエフェクトを実行します
$.tranzify.runTransition(config);
}


彼を抽出する必要がある理由は次のとおりです。以下のsetIntervalでも使用されていますが、コードが重複しすぎたくないので、一元管理するために抽出する必要があります。次にsetIntervaleを見てみましょう。

コードをコピー コードは次のとおりです: //ループ関数を設定

config .interval = setInterval(showNext, (config.multi * 150) 3000);

実際には、ループ関数を追加し、数秒ごとに showNext 関数を実行して次の画像を表示します。 。ここで注意すべき点は、インターバル時間の計算です。前の章の runTransition 関数で animate オブジェクトに設定した間隔をまだ覚えていますか?水平表示は 600 ミリ秒の低速に設定されています。各フレームの垂直表示設定時間は 150 ミリ秒で、合計 config.multi フレームがあります。 (config.multi * 150) は明らかに 600 より大きいため、ここでは (config.multi * 150) を時間標準として採用します。アニメーションが終了するとすぐに次の画像が表示されるのを防ぐため、さらに 3 秒を追加しました。

ループ関数を追加した後、セレクターオブジェクトにマウスが移動すると間隔が移動し、マウスが移動すると間隔が追加されます。

コードをコピー コードは次のとおりです: //マウスをオブジェクトに移動し、ループ関数の外へマウスを移動し、ループ関数を追加します。

$(config.selector).hover(function () {

clearInterval(config.interval);
}, function () {
config.interval = setInterval( showNext, (config.multi * 150) 3000);
}); ここで注意すべき点は、次のように作成したオブジェクトを渡すことです。 Interval を config.interval に設定します。これは、前の手順で作成したループ関数、削除されたループ関数、および削除されたループ関数が同じオブジェクトであることを確認するために行われます。次のように、setInterval によって作成されたオブジェクトを宣言されていない間隔に直接渡すことは非常にタブーです。

コードをコピー

コードは次のとおりです。 interval = setInterval(showNext, (config.multi * 150) 3000); これを実行すると、ウィンドウオブジェクトの間隔に渡されます。 、コードの競合が簡単に発生する可能性があります。たとえば、setInterval オブジェクトが他のコードまたはプラグインで作成され、interval (window.interval に相当) に渡された場合、プラグインの clearInterval は他の人のコードの通常の動作に影響を与え、同様のことが当てはまります。他の人のコードにも影響します。

最後に、コードの堅牢性を高めるために、createOverlay に次のコードを追加して、マスク レイヤーが同時に 1 つだけ存在するようにしました。

コードをコピー

コードは次のとおりです:

//実行が終了したトゥイーン アニメーションがあるかどうかを確認します。存在する場合は、アニメーションをすぐに終了し、オブジェクトを削除します。 🎜>if (transOverlay) {
transOverlay.stop(true, true);
transOverlay.remove();
}


説明する必要があることはすべて完了しましたでは、実際にデモを行ってその効果を見てみましょう。

デモのダウンロード アドレス:
jQuery.animation.tranzify_improve.js