jqueryアニメーション2.要素座標アニメーション効果(絵コリドーの作成)_jquery

エフェクトのプレビュー画像:

デモをダウンロードして、完全なエフェクトを確認できます。制作プロセスは以下で紹介されます。
1. まず HTML ページを作成します。HTML 構造は次のとおりです。

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

«画像 1

• 画像 2


• 画像 3


• 画像 4


• href="#image5" title ="画像 5">画像 5


• 
  

ビューアには複数の画像が含まれます。ul オブジェクトには、「前」、「次」、および各画像に対応するナビゲーションが含まれます。

2. 次に、これらの HTML 要素に CSS スタイルを設定する必要があります。CSS については詳しく説明しません。ビューアは一度に 1 つの画像しか表示できません。 :

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

#slider

{
幅: 500ピクセル;
位置:
}
#viewer
幅: 400ピクセル;
マージン: 自動; : 相対;
オーバーフロー: 非表示;
#slider
{
マージン: 0 自動; -style-type: none;
#slider ul:after
{
content: ".";
display: ブロック; : 0;
クリア: 両方;
}
#slider li
{
float: 左; #next
{
位置: 絶対;
上: 175px;
#prev
{
左:
}
#next
{
位置: 絶対;
右: 10px;
}
{
表示: なし;
{
幅: 2000 ピクセル;
高さ: 300 ピクセル;
上: 0;
#slide img
{ 🎜>float: 左;
幅: 400px;
#title
{
テキスト整列: 中央; 🎜>}


3. jquery および jquery.easing.1.3.js への参照をページに追加します。次に、記事の主要部分で、ナビゲーション用の対応する js イベントを作成します。
まず、5 つの画像をラップする新しい div を作成する必要があります。




コードをコピー


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


$('#viewer').wrapInner ('

');




コードをコピー


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


varcontainer = $('#slider' )、
prev =container.find('#prev')、
prevChild = prev.find('a')、

next =container.find('#next').removeClass('hidden ')、
nextChild = next.find('a')、
slide =container.find('#slide')

2 つの新しい JS 変数を作成します。キーは現在のアクティブな画像 ID と詳細は、すべての画像のそれぞれの位置とタイトル情報を保存します。 コードをコピー

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

key = "image1",
details = {
image1: {
position: 0,
title: slide.children().eq(0).attr(' alt')
},
image2: {
position: -400,
title: slide.children().eq(1).attr('alt')
},
image3: {
position: -800,
title: slide.children().eq(2).attr('alt')
},
image4: {
position : -1200,
title: slide.children().eq(3).attr('alt')
},
image5: {
position: -1600,
title: slide.children().eq(4).attr('alt')
}
};

画像のタイトルを表示するには、h2 タイトルを追加する必要がありますページへ。

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

$('

', {
id: 'title',
text: 詳細[key].title
}).prependTo('#slider');

上記の作業が完了したらa タグには、「前」と「次」の 2 種類の a タグと、各画像に対応するナビゲーションの 2 種類があります。それぞれに対応するクリック イベントを追加する必要があります。ただし、それらはすべて同じコールバック関数を使用します。まずコールバック関数の作成を完了しましょう。コードのアイデアはコメントの形で直接完成させます。

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

function postAnim(dir) {
//まず、数値部分のみを含む現在のアクティブな画像の ID を取得します。
var keyMath = parseInt(key.match(/d $/))
// スライドの左側は小さいです。 0 より大きい場合は、現在アクティブな画像が画像 1 ではないことを意味し、「前」のナビゲーションが表示されます。それ以外の場合、「前」のナビゲーションは表示されません
(parseInt(slide.css('left')) //スライドの左側は -1600 に等しく、これは現在アクティブな画像が第 5 章であり、「次」のナビゲーションが消え、それ以外の場合は「次」が表示されます。 ' ナビゲーションは
(parseInt(slide.css('left') ) === -1600) ? next.hide() : next.show(); // if 条件文のみ「前」と「次」のナビゲーションを使用する場合に意味があります。実装された関数は、「前へ」をクリックしてキーを 1 つ減らし、「次へ」をクリックしてキーを 1 つ増やすことです。
if (dir) {
var titleKey = (dir === 'back') ? keyMath - 1 : keyMath 1;
key = 'image' titleKey;
}
//h2 タイトルをリセットします
container.find('#title').text(details[key] .title);
//現在アクティブな画像をリセットします
container.find('.active').removeClass('active');
container.find('a[href=#' key ']' ).addClass('active');
}


次に、「前」と「次」のナビゲーション関数を完成させます。

コードをコピーします コードは次のとおりです。

nextChild.add(prevChild).click( function (e ) {

// デフォルトのイベントを防止します。そうでないとアニメーション効果が失われます。
e.preventDefault();
var arrow = $(this).parent(); / 現在のスライドにはアニメーションがありません 新しいアニメーション効果を追加するとき
if (!slide.is(':animated')) {
slide.animate({
left: (arrow.attr(' id')) == = 'prev') ? ' =400' : '-=400'
}, 'slow', 'easeOutBack', function () {
(arrow.attr("id") ) === "prev ") ? postAnim("forward") :
}
}; 最後に、画像関数実装の対応するナビゲーション。




コードをコピー

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

$('#ui li a') .not( prevChild).not(nextChild).click(function (e) { //デフォルトイベントを阻止します e.preventDefault(); //現在のアクティブピクチャIDを取得します key = $(this ).attr('href').split('#')[1];

//アニメーション効果を設定します

slide.animate({
left: 詳細[key]. Position
} , 'slow', 'easeOutBack', postAnim);


このレッスンの内容は完了です。デモをダウンロードして関数を確認できます。は次のように実装されます。

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