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

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

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

1 个答案: