javascript 在页面周围随机移动图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13784686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Moving an image randomly around a page
提问by James Barracca
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?
我创建了三个热气球的 .png 图像。每个都有不同的尺寸，因此它们散发出“深度”的概念。对这些 .png 进行编码以便它们像热气球一样在我的容器周围移动和漂浮的最佳方法是什么？
I've tried the following code from the Spritely website which I adapted as so:
我已经尝试了来自我改编的 Spritely 网站的以下代码：
$('#balloon1')
.sprite({fps: 3, no_of_frames: 1})
.spRandom({
top: 70,
left: 100,
right: 200,
bottom: 340,
speed: 10000,
pause: 3000
});
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"
我将此代码用于其他两个气球 (#balloon1) 和 (#balloon2)，然后将它们各自的 DIV 放入标有“#sky”的容器 DIV
I figured putting the speed to 10000 would make them float around a lot slower.
我认为将速度设置为 10000 会使它们漂浮得慢很多。
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!
如果您能提供一些帮助，非常感谢！
回答by Zeb Rawnsley
Here is an existing [partial] solution to your problem:
这是您问题的现有 [部分] 解决方案：
HTML:
HTML：
<div id="container">
<div class='a'></div>
<div class='b'></div>
<div class='c'></div>
</div>?
CSS:
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;
}?
回答by Shay Zalman
If anyone is interested in a jQuery plugin (forking the same functions) Easier to apply on multiple elements in the page.
如果有人对 jQuery 插件（分叉相同的功能）感兴趣，那么更容易应用于页面中的多个元素。
HTML:
HTML：
<div id="container">
<div class='a rand'></div>
<div class='b rand'></div>
<div class='c rand'></div>
</div>
CSS:
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 plugin:
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 ));
Usage:
用法：
$(document).ready(function() {
$('.rand').randomizeBlocks();
});
