基于鼠标位置的CSS背景图像定位

Question

我有一个带有背景图像的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");
}
};

任何帮助都将不胜感激。谢谢。

Answer 1

为每个图像创建三个不同的interact(mousePos, ["0px", "-288px", "-576px"]);调用，其中一个调用mousePos，第二个参数是当前动画对象的对象/坐标。还为每个类创建单独的类，或者提供当前正在动画的jQuery对象作为交互函数的参数