Question

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

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

但是我不确定如何循环它并让它在x轴和y轴上同时进行。谢谢，如果可以的话！我确实启用了jQuery：）

Answer 1

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

<强> HTML

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

<强> CSS

#picture{
    position:absolute;   
}

<强> JS

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

Answer 2

CSS

#friends { position: absolute; }

标记

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

JS

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/

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

Answer 3

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

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

原样，它会继续向上飞行，因为动画总是设置为上升30像素。你必须改变飞行功能才能使运动随机化。为了更真实，保存以前的动作，只需稍微改变一下（小加速度），这样就不会有非常不稳定的动作。

Answer 4

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

对于x轴，请使用左侧的CSS属性:(顶部：将为您提供y轴）

慢慢移动图片

4 个答案: