鼠标位置交互图像

Question

我目前有一个根据鼠标位置更新的图像。查看http://www.fore6.com/?p=533

1：http://www.fore6.com/?p=533让你明白我的意思。

问题是我有多个图像需要应用它，并且每个图像都需要独立于其他图像进行动画。目前它们都是同时动画的，也就是说，它们需要独立地动画，因为每个图像的鼠标位置都是不同的！

我可以通过对每个图像重复该函数并更改变量来使其工作，但这是非常大量的代码。我如何在一个函数中做到这一点？

我猜我可能需要将每个图像放入一个数组中或使用$(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");
}
};

Answer 1

您只需要一个图像元素，如下所示：

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

假设我们有一组图像，名称分别是:000.jpg、001.jpg和...其中：

1. first num表示如果为1，鼠标位置在中间上方，如果为0，则鼠标位置在中间下方。如果为0，则
2. second num显示鼠标位于中间左侧，如果为1，则显示鼠标右侧。
3. third num将页面的每个季度划分为4个部分，角度为22.5度

获取图像的中心，并检查光标的位置与图像的中心。然后根据位置创建镜像的名称：

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')；})；

working sample