如何使用javascript异步移动多个叠加图像？

Question

我有10个形状，共同定义方形图像，如下所示。我想使用像 sine 这样的周期函数的输出移动每个图像，该函数将用户鼠标位置作为输入。每个图像应该具有不同的频率和周期，从而影响它的运动，以便当用户将鼠标悬停在场景上时，形状会相互抖动。

到目前为止，我已设法使用此方法获得1个形状：

$(document).mousemove(function(e){
        var track = function(ampl, freq) {
        return {
            x   : ampl * Math.sin(freq*e.pageX),
            y   : ampl*1.6 * Math.sin(freq*e.pageY)
        };
    }

        var current = track(10, 0.05);
    $("#image").css({left:current.x, top:current.y});

});

如何让this jsfiddle为其他9个形状做到这一点？

Answer 1

我会做这样的事情 - http://jsfiddle.net/jfhk8bye/

track = function(ampl, freq, pageX, pageY) {
    return {
        x   : ampl * Math.sin(freq*pageX),
        y   : ampl*1.6 * Math.sin(freq*pageY)
    };
}
$imgs = $('img.image')
$(document).mousemove(function(e)
{
    $imgs.each(function()
  {
    var $img = $(this);
    var current = track($img.data('ampl'), $img.data('freq'), e.pageX, e.pageY);
    console.log(current);
    $img.css({left:current.x, top:current.y});
  });
});

我做了什么：

• 将合格的图像ID转换为类（也更新CSS）
• 向表示其频率和幅度的图像元素添加数据属性（这样您就可以用HTML控制这些值）
• 适当更新了您的javascript并对其进行了优化。

Answer 2

也许是这样的：http://jsfiddle.net/g7Lpnw5b/

用类名替换id，因为多个元素不能共享相同的名称，然后遍历元素以将它们分别移动到不同的坐标。您可能需要调整track函数的参数以使形状随意移动。

Answer 3

@charsi说的是真的。

您还需要使用$.each(index,el)获取不同的索引值，并在sin cos函数中使用它。

Here's a demo

function track(ampl, freq, index,x,y) {
  return {
    x   : ampl * Math.sin(freq*x + index),
    y   : ampl*1.6 * Math.sin(freq*y + index)
  };
}

$(document).mousemove(function(e){
    $(".image").each(function(index,el){
           var current = track(5, 0.05, index, e.pageX, e.pageY);
       $(this).css({left:current.x, top:current.y});
    });
});

已更新：该功能应在mousemove事件之外

Answer 4

因为所有图像都具有相同的id，而jquery只期望一个。它将更改应用于它找到的第一个更改。为每个人提供不同的ID并将其添加到列表中。如果您不希望它们对齐，也可以在每个之前更改当前值。