在页面周围随机移动图像 [英] Moving an image randomly around a page

问题描述

我创建了三个.png热气球图像。每个都是不同的大小，以便他们给出深度的想法。编码这些.png的最佳方法是什么，以便它们像热气球一样移动并漂浮在我的容器周围？

I created three .png images of hot air balloons. Each are different sizes so that they give off the idea of "depth." What is the best way to code these .png's so that they move and float around my container like hot air balloons?

我在Spritely网站上尝试了以下代码，我将其改编为：

I've tried the following code from the Spritely website which I adapted as so:

$('#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中

I put this code for the other two balloons (#balloon1) and (#balloon2) and then I put their respective DIVs into a container DIV labeled "#sky"

我认为将速度设置为10000将使它们漂浮得慢得多。

I figured putting the speed to 10000 would make them float around a lot slower.

然而，它并没有按照我所希望的方式运作。首先，一旦页面加载，所有三个气球（我最初位于容器的三个不同位置）立即漂浮到同一个位置，之后它们似乎没有从那个位置移动太多。

However, it's not functioning at all the way I had hoped. First off, once the page loads, all three balloons (which I positioned originally in three separate places along the container) immediately float to the same exact spot, and they don't seem to move much from that spot afterwards.

是否有更简单，更有效的方法让我的三个气球图像随机且逼真地在我的容器中移动？

Is there an easier and more effective way of getting my three balloon images to move around my container randomly and realistically?

如果你能提供一些帮助，非常感谢你！

Thank you so much if you are able to provide some help!

推荐答案

以下是您问题的现有[部分]解决方案：

Here is an existing [partial] solution to your problem:

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：

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

}​

现场JSFiddle演示

这篇关于在页面周围随机移动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！