在頁面上隨機移動圖像

Question

我創建了三個熱氣球.png圖像。每個都是不同的大小，以便他們發出「深度」的想法。編寫這些.png的最好方法是什麼，以便它們像熱氣球一樣移動並浮在我的容器周圍？

我試過下面的代碼從興致網站，我適應像這樣：

$('#balloon1') 
    .sprite({fps: 3, no_of_frames: 1}) 
    .spRandom({ 
     top: 70, 
     left: 100, 
     right: 200, 
     bottom: 340, 
     speed: 10000, 
     pause: 3000 
    }); 

我把這段代碼爲其他兩個氣球（＃balloon1）和（＃balloon2），然後我把將他們各自的DIV放入標有「#sky」的容器DIV中

我認爲把速度提高到10000會使它們漂浮很慢。

然而，它並沒有像我希望的那樣運作。首先，一旦頁面加載，所有三個氣球（我最初定位在沿着容器的三個不同位置）立即漂浮到相同的確切位置，並且之後它們似乎沒有多大移動。

有沒有一種更容易，更有效的方式讓我的三個氣球圖像隨機且逼真地在我的容器周圍移動？

非常感謝你，如果你能夠提供一些幫助！

Answer 1

這裏是一個現有[局部]解決問題的方法：

HTML：

<div id="container"> 
<div class='a'></div> 
    <div class='b'></div> 
    <div class='c'></div> 
</div>​ 

CSS：

div#container {height:500px;width:500px;} 

div.a { 
width: 50px; 
height:50px; 
background-color:red; 
position:fixed; 

} 
div.b { 
width: 50px; 
height:50px; 
background-color:blue; 
position:fixed; 

} 
div.c { 
width: 50px; 
height:50px; 
background-color:green; 
position:fixed; 

} 

的JavaScript：

$(document).ready(function() { 
    animateDiv($('.a')); 
     animateDiv($('.b')); 
     animateDiv($('.c')); 

}); 

function makeNewPosition($container) { 

    // Get viewport dimensions (remove the dimension of the div) 
    var h = $container.height() - 50; 
    var w = $container.width() - 50; 

    var nh = Math.floor(Math.random() * h); 
    var nw = Math.floor(Math.random() * w); 

    return [nh, nw]; 

} 

function animateDiv($target) { 
    var newq = makeNewPosition($target.parent()); 
    var oldq = $target.offset(); 
    var speed = calcSpeed([oldq.top, oldq.left], newq); 

    $target.animate({ 
     top: newq[0], 
     left: newq[1] 
    }, speed, function() { 
     animateDiv($target); 
    }); 

}; 

function calcSpeed(prev, next) { 

    var x = Math.abs(prev[1] - next[1]); 
    var y = Math.abs(prev[0] - next[0]); 

    var greatest = x > y ? x : y; 

    var speedModifier = 0.1; 

    var speed = Math.ceil(greatest/speedModifier); 

    return speed; 

}​ 

Live JSFiddle Demo

Answer 2

如果有人對jQuery插件感興趣（分叉相同的功能） 更容易應用在頁面中的多個元素上。

HTML：

<div id="container"> 
    <div class='a rand'></div> 
    <div class='b rand'></div> 
    <div class='c rand'></div> 
</div> 

CSS：

div#container {height:500px;width:500px;} 
div.a { 
width: 50px; 
height:50px; 
background-color:red; 
position:fixed; 
    top:100px; 
    left:100px; 
} 
div.b { 
width: 50px; 
height:50px; 
background-color:blue; 
position:fixed; 
    top:10px; 
    left:10px; 
} 
div.c { 
width: 50px; 
height:50px; 
background-color:green; 
position:fixed; 
    top:200px; 
    left:100px; 
} 

jQuery插件：

(function($) { 

    $.fn.randomizeBlocks = function() { 
    return this.each(function() { 
      animateDiv($(this)); 
    }); 
    }; 

    function makeNewPosition($container) { 
     // Get viewport dimensions (remove the dimension of the div) 
     var h = $container.height() - 10; 
     var w = $container.width() - 10; 

     var nh = Math.floor(Math.random() * h); 
     var nw = Math.floor(Math.random() * w); 

     return [nh, nw]; 

    } 

    function animateDiv($target) { 
     var newq = makeNewPosition($target.parent()); 
     var oldq = $target.offset(); 
     var speed = calcSpeed([oldq.top, oldq.left], newq); 

     $target.animate({ 
      top: newq[0], 
      left: newq[1] 
     }, speed, function() { 
      animateDiv($target); 
     }); 

    }; 

    function calcSpeed(prev, next) { 

     var x = Math.abs(prev[1] - next[1]); 
     var y = Math.abs(prev[0] - next[0]); 

     var greatest = x > y ? x : y; 

     var speedModifier = 0.03; 

     var speed = Math.ceil(greatest/speedModifier); 

     return speed; 

    } 

}(jQuery)); 

用法：

$(document).ready(function() { 
    $('.rand').randomizeBlocks(); 
}); 

http://jsfiddle.net/fmvtb88d/