慢慢移动图片答案

【问题标题】：Moving a picture around slowly慢慢移动图片
【发布时间】：2013-03-06 14:31:39
【问题描述】：

我有一张气球的照片。我需要它随机在我的页面上飞来飞去（它有点小）。我只需要它在页面的上半部分飞行。我找到了以下代码：

$("#Friends").animate({ 
        top: "-=30px",
      }, duration );

但我不确定如何循环它并让它同时在 x 轴和 y 轴上移动。可以的话谢谢！我确实启用了 jQuery :)

【问题讨论】：

这个网站会很棒
大声笑，我很快就会发布它的图像，这是我班级的一个项目，但我想添加一些 pizazz :)

标签： javascript jquery html image

【解决方案1】：

这样的事情怎么样....LIVE FIDDLE

HTML

<img src="http://www.birdsnways.com/imgs/blbd48rt.gif" id="picture" />

CSS

#picture{
    position:absolute;   
}

doNextPoint();

function doNextPoint(){

    var maxX = $(window).width() - $('#picture').width();    
    var newX = rand(0, maxX);    
    var maxY = ($(window).height()/2) - $('#picture').height();
    var newY = rand(0, maxY);
    var speed  = rand (1000, 3000);

    $('#picture').animate({
        'top': newY + 'px',
        'left': newX + 'px' 
    }, speed, function(){
        doNextPoint();    
    });
}


function rand (min, max) {
     return Math.floor(Math.random() * (max - min + 1)) + min;
}

【讨论】：

干得不错。
+1 这比当前接受的答案要好，因为它明智地考虑了屏幕尺寸。
我刚刚意识到这已在我发布答案前 5 分钟发布，它们看起来非常相似！我感觉不好:(

【解决方案2】：

CSS

#friends { position: absolute; }

标记

<img src="http://jsfiddle.net/img/logo.png" 
id="friends"/>

function moveit() {

    var newTop = Math.floor(Math.random()*350);
    var newLeft = Math.floor(Math.random()*1024);
    var newDuration = Math.floor(Math.random()*5000);

    $('#friends').animate({
      top: newTop,
      left: newLeft,
      }, newDuration, function() {
        moveit();
      });

}

$(document).ready(function() {
    moveit();
});

~~现场演示： http://jsfiddle.net/W69s6/embedded/result/~~

更多更新的现场演示：http://jsfiddle.net/9cN4C/

（旧的演示已过时并且链接断开，但代码仍然正确，因此仅供参考，不用于演示）

【讨论】：

@AlbertRenshaw - 感谢您的编辑。我似乎 jsfiddle 已经将他们的 logo png 移动到了不同的目录。
是的哈哈，这就是我这次使用google logo的原因，它往往更……永久？哈哈，美好的一天:)

【解决方案3】：

您可以将该代码粘贴到一个命名函数中，然后将该函数添加为动画的回调参数，这样它会在完成后再次调用自己。

var flying;
flying = function() {
    $("#Friends").animate({ 
        top: "-=30px",   // you'll need to change this
      },
      duration,
      flying
    );
}
flying();

因为动画总是被设置为上升 30 像素，所以它会一直向上飞。您必须更改飞行功能以稍微随机化运动。为了更真实，请保存之前的动作，然后稍微改变一下（小加速度），这样它就不会出现非常生涩的动作。

【讨论】：

【解决方案4】：

循环它：使用 SetTimeout：https://developer.mozilla.org/en/window.setTimeout

对于 x 轴，使用左侧的 CSS 属性：（顶部：将获得 y 轴）

【讨论】：

否 - 最好使用 animate() 并在完成后再次调用该函数 (jsfiddle.net/Jaybles/AudTa)。 setTimeout 不太可取。