慢慢移动图片

Question

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

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

但是我不知道如何循环它并让它在x轴和y轴上同时进行.谢谢,如果可以的话!我确实启用了jQuery :)

Answer 1

这样的事情怎么样...... 真实的

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