慢慢移動一張圖片

Question

我有一張氣球的照片。我需要它隨機播放我的頁面（它有點小）。我只需要在我的頁面上半部分飛行。我發現下面的代碼：

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

但我不知道我怎麼可以循環它，並使它同時在X軸和Y軸。謝謝，如果你可以！我有jQuery的啓用:)

Answer 1

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 2

要循環播放：使用的setTimeout：https://developer.mozilla.org/en/window.setTimeout

爲x軸，使用CSS屬性的左側（頂部：將讓你y軸）

Answer 3

你可以將該代碼粘貼到一個已命名的函數中，然後將該函數添加爲動畫的回調參數，因此它會在完成後再次調用自身。

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

因爲它會一直保持向上飛行，因爲動畫總是設置爲上升30 px。你必須改變飛行功能來隨機化運動。爲了更加真實，請保存之前的動作，只需稍稍改變一下（小的加速度），以便它不會有很快的動作。

Answer 4

如何這樣的事情.... 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; 
}