Javascript 慢慢地移动图片

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

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

---

但我不确定如何循环它，使它同时在x轴和y轴上运行。如果可以的话，谢谢你！我确实启用了jQuery:）

来循环它：使用SetTimeout:

---

对于x轴，使用CSS属性left:（顶部：将获得y轴）

循环它：使用SetTimeout:

---

对于x轴，使用CSS属性left:（顶部：将获得y轴）

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

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

---

因为动画总是设置为上升30像素，所以它会一直向上飞行。你必须改变飞行函数，使运动随机化一点。为了获得更逼真的效果，请保存上一个运动，只需稍微改变一下（小加速度），这样它就不会有非常急促的运动。

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

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

---

因为动画总是设置为上升30像素，所以它会一直向上飞行。你必须改变飞行函数，使运动随机化一点。为了更逼真，保存上一个动作，只需稍微改变一下（小加速度），这样它就不会有非常急促的动作。

像这样的动作怎么样

HTML

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

JS

#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;
}

---

像这样的怎么样

HTML

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

JS

#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;
}

CSS

加价

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

现场演示：

更多更新的现场演示：

（旧的演示已经过时，并且有一个断开的链接，但是代码仍然是正确的，所以留下来供参考，而不是演示）

CSS

加价

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

现场演示：

更多更新的现场演示：

---

（旧的演示已经过时，并且有一个断开的链接，但是代码仍然正确，所以它是留作参考的，不是供演示的）

这个网站将是一个很棒的网站，我很快会发布它的图片，这是我的班级的一个项目，但我想添加一点活力：）这个网站将是一个很棒的网站，我将很快发布它的图像，这是我的类的一个项目，但我想添加一点活力：）不-最好使用

animate（）

并在完成后再次调用该函数（）。setTimeout不太可取。否-最好使用

animate（）

并在完成（）后再次调用该函数。setTimeout就不那么可取了。一路完成任务做得很好。+1这比目前接受的答案要好，因为它明智地考虑了屏幕大小。我刚刚意识到这已经在我发布答案前5分钟发布了，它们看起来非常相似！我感觉很糟糕：（一路完成这项任务做得很好。+1这比目前接受的答案要好，因为它明智地考虑了屏幕大小。我刚刚意识到，在我发布我的答案之前5分钟就发布了这篇文章，它们看起来非常相似！我感觉很糟糕：（@Alberrenshaw-谢谢你的编辑。我似乎已经将JSFIDLE的徽标png移到了另一个目录。是的，哈哈，这就是我这次使用google徽标的原因，它往往更…永久？哈哈，祝你好运：）@阿尔伯特伦肖-感谢您的编辑。我似乎已经将JSFIDLE的徽标png移到了另一个目录。是的，哈哈，这就是我这次使用谷歌徽标的原因，它往往更…永久性？哈哈，祝您好运：）