javascript - 如何使用 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 并对其进行了优化。