0

マウスの位置に基づいて位置を変更する背景画像を持つ div があります。基本的に行うことは、誰かが頭を向けるアニメーションを作成することです ( http://www.fore6.com/?p=533を参照して、より良いアイデアを得ることができます。

正常に動作しますが、3 つの異なる画像が隣り合って表示されます。各画像を個別にアニメーション化するにはどうすればよいですか? 現時点では、それらはすべて一斉にアニメーション化されますが、マウスは常に各画像に対して異なる位置にあるため、異なる方法でアニメーション化する必要があります。ループを使用する必要があるのではないかと考えていますが、実装方法がわかりません。

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

var aniX = null;
var aniY = null;

aniX = $('.anim-photo').offset().left;
aniY = $('.anim-photo').offset().top;

$(document).mousemove(function(event) {
    var mousePos = new Array(event.pageX, event.pageY);
    interact(mousePos, ["0px", "-288px", "-576px"]);
})

function interact(mouseCord, aniCord) {
    if (mouseCord[0] < aniX && mouseCord[1] < aniY){ // Box-1
    $(".anim-photo").css("background-position", aniCord[0]+" 0px");

} else if (mouseCord[0] > aniX && mouseCord[0] < aniX+285 && mouseCord[1] < aniY){ // Box-2
    $(".anim-photo").css("background-position", aniCord[1]+" 0px");

} else if (mouseCord[0] > aniX+285 && mouseCord[1] < aniY){ // Box-3
    $(".anim-photo").css("background-position", aniCord[2]+" 0px");

} else if (mouseCord[0] < aniX && mouseCord[1] > aniY && mouseCord[1] < aniY+357){ // Box-4
    $(".anim-photo").css("background-position", aniCord[0]+" -360px");

} else if (mouseCord[0] > aniX && mouseCord[0] < aniX+285 && mouseCord[1] > aniY && mouseCord[1] < aniY+357){ // Box-5
    $(".anim-photo").css("background-position", aniCord[1]+" -360px");

}else if (mouseCord[0] > aniX+285 && mouseCord[1] > aniY && mouseCord[1] < aniY+357){ // Box-6
    $(".anim-photo").css("background-position", aniCord[2]+" -360px");

} else if (mouseCord[0] < aniX && mouseCord[1] > aniY+357){ // Box-7
    $(".anim-photo").css("background-position", aniCord[0]+" -720px");

} else if (mouseCord[0] > aniX && mouseCord[0] < aniX+285 && mouseCord[1] > aniY+357){ // Box-8
    $(".anim-photo").css("background-position", aniCord[1]+" -720px");

} else if (mouseCord[0] > aniX+285 && mouseCord[1] > aniY+357){ // Box-9
    $(".anim-photo").css("background-position", aniCord[2]+" -720px");
}
};

どんな助けでも大歓迎です。ありがとう。

4

1 に答える 1

0

interact(mousePos, ["0px", "-288px", "-576px"]);mousePos を使用して、画像ごとに 3 つの異なる呼び出しを作成し、2 番目のパラメーターは現在アニメーション化しているオブジェクトのオブジェクト/座標です。また、それぞれに個別のクラスを作成するか、現在アニメートしているjQuery オブジェクトをパラメーターとしてインタラクト関数に提供します。

于 2012-09-25T11:17:54.520 に答える