Question

我目前有一张根据鼠标位置更新的图片。查看[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");
}
};

Answer 1

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

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

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

第一个数字表示鼠标位置如果为1则高于中间位置，如果为0则低于中间位置。
第二个数字表示如果为0则为鼠标左侧，如果为1则为右侧。
第三个数字将页面的每四分之一分成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'， '面跟随/' + A + B + C + 'JPG。'）; }）;
working sample

鼠标位置交互式图像

1 个答案: