我有一个带有背景图像的 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");
}
};
任何帮助，将不胜感激。谢谢。