0

現在、マウスの位置に応じて更新される画像があります。[http://www.fore6.com/?p=533][1]をチェックしてください

[1]：http ://www.fore6.com/?p= 533で、私が何を意味するのかを理解できます。

問題は、これを適用する必要のある複数の画像があり、各画像が互いに独立してアニメーション化する必要があることです。現時点では、それらはすべて同時にアニメートします。マウスの位置は画像ごとに異なるため、個別にアニメーション化する必要があります。

画像ごとに関数を繰り返し、変数を変更することで機能させることができますが、それは非常に多くのコードです。1つの関数内でこれを行うにはどうすればよいですか？

各画像を配列に入れるか、$（this）を使用する必要があるかもしれないと推測していますが、それを実装する方法を理解できないようです。

どんな助けでも大歓迎です。私が使用しているコードは以下のとおりです。

var imageX = null;
var imageY = null;

imageX = $('.anim-photo').offset().left;
imageY = $('.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] < imageX && mouseCord[1] < imageY){ // Box-1
    $(".anim-photo").css("background-position", aniCord[0]+" 0px");

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

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

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

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

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

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

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

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

1 に答える 1

2

次のような画像要素が 1 つだけ必要です。

<img id="face" src="face-follower/0.jpg" alt="face">

000.jpg 、 001.jpg 、 ... のような名前の画像のセットがあるとします。

  1. 最初の num は、1 の場合はマウスの位置が中央より上にあり、0 の場合は中央より下であることを示します。
  2. 2 番目の num は、0 の場合は中央の左、1 の場合は右のマウスを示します。
  3. 3 番目の数値は、ページの各 4 分の 1 を 22.5 度の角度で 4 つのセクションに分割します

画像の中心を取得し、カーソルの位置を画像の中心で確認します。次に、位置に応じてイメージの名前を作成します。

var element = $('#face');
var top = element.offset().top + element.height()/2;
var left = element.offset().left + element.width()/2;

var a = 0
, b = 0 
, c = 0;
$('body').mousemove(function()
{
var x=Math.floor(event.clientX - left);
var y=Math.floor(event.clientY - top);
if(x > 0)
  a = 1;
else if(x < 0)
  a = 0;
if(y > 0)
  b = 0;
else if(y < 0)
  b = 1;
if(Math.abs(x) > Math.abs(y))
{
  c = 2;
  if(Math.abs(x)>Math.abs(y)*2.4)
    c = 3;

}
else if(Math.abs(y) > Math.abs(x))
{
  c = 1;
  if (Math.abs(y)>Math.abs(x)*2.4)
    c = 0;
}

画像名が 3 文字になったので、そのソースを変更します element.attr('src','face-follower/'+a+b+c+'.jpg'); });
作業サンプル

于 2014-01-14T11:25:06.323 に答える