0

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

[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");
}
};
4

1 回答 1

2

你只需要一个像这样的图像元素：

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

假设我们有一组名称为：000.jpg 、 001.jpg 和 ... 其中的图像：

  1. 第一个 num 表示如果为 1，鼠标位置在中间以上，如果为 0，则在中间以下。
  2. 第二个 num 如果为 0，则显示鼠标在中间的左侧，如果为 1，则显示鼠标的右侧。
  3. 第三个数字将页面的每个四分之一分为 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'); });
工作样本

于 2014-01-14T11:25:06.323 回答