Javascript 在页面周围随机移动图像
我创建了三个热气球的.png图像。每一个都有不同的大小,所以它们都有“深度”的概念。编码这些.png的最好方法是什么,这样它们就可以像热气球一样在我的容器周围移动和漂浮 我从Sprity网站上尝试了以下代码,并将其改编为:Javascript 在页面周围随机移动图像,javascript,jquery,containers,spritely,Javascript,Jquery,Containers,Spritely,我创建了三个热气球的.png图像。每一个都有不同的大小,所以它们都有“深度”的概念。编码这些.png的最好方法是什么,这样它们就可以像热气球一样在我的容器周围移动和漂浮 我从Sprity网站上尝试了以下代码,并将其改编为: $('#balloon1') .sprite({fps: 3, no_of_frames: 1}) .spRandom({ top: 70, left: 100, right: 200, bottom: 340,
$('#balloon1')
.sprite({fps: 3, no_of_frames: 1})
.spRandom({
top: 70,
left: 100,
right: 200,
bottom: 340,
speed: 10000,
pause: 3000
});
我为另外两个气球(#ballood1)和(#ballood2)输入了代码,然后将它们各自的DIV放入一个容器DIV中,标记为“#sky”
我想把速度提高到10000会使它们的漂浮速度慢很多
然而,它并没有像我所希望的那样发挥作用。首先,一旦页面加载,所有三个气球(我最初将其放置在容器的三个不同位置)立即漂浮到同一个确切位置,之后它们似乎不会从该位置移动太多
有没有一种更简单、更有效的方法让我的三个气球图像在我的容器中随机、真实地移动
如果你能提供一些帮助,非常感谢 以下是您的问题的现有[部分]解决方案: HTML: 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;
}
如果有人对jQuery插件感兴趣(分叉相同的函数) 更容易应用于页面中的多个元素 HTML: 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();
});
当我昨天问了一个类似的问题时,我尝试了这种方法,但当我把所有这些都放到Dreamweaver和preview中时,没有任何动画效果。我把所有这些都复制粘贴到编辑器中,只是为了测试一下。当我在JSFIDLE上查看它时,它看起来就像我想要做的。但是,正如我所说,当我将它粘贴到Dreamweaver中并预览时,没有任何动画。我需要某种jQuery版本吗?我遗漏了什么吗?我明白了,你就是问最后一个问题的那个人-你为什么不更新你之前的问题?--您正在运行哪个版本的jQuery。拥有JSFIDLE是概念证明,所以您的环境一定有问题。对不起,我是这个网站的新手,如果我没有遵守协议,我很抱歉。无论如何,我正在运行jquery-1.8.0.jsI测试了jquery 1.2,它运行得很好,所以我们需要更多地了解您的环境。您是否已打开控制台以检查所提供代码的错误?在调用此脚本之前是否包含jQuery?您正在异步加载jQuery吗?这里有太多的未知。我接受了它,因为从技术上讲,它可以在JSFIDLE上工作,这是一个正确的解决方案。但让我们看看我的环境。您所说的“在调用此脚本之前我是否包括jQuery?”是什么意思?我将脚本粘贴在标记之间。
<div id="container">
<div class='a rand'></div>
<div class='b rand'></div>
<div class='c rand'></div>
</div>
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;
}
(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();
});