以随机位置开头的 Javascript 对象

Question

我有 3 个徽标图像(#logo、#logo2、#logo3)，它们使用我的 javascript 在页面上随机移动：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2    /jquery.min.js"></script>
<script type="text/javascript">
function moveDiv() {
var $span = $("#logo");
$span.fadeOut(500, function() {
var maxLeft = $(window).width() - $span.width();
var maxTop = $(window).height() - $span.height();
var leftPos = Math.floor(Math.random() * (maxLeft + 10))
var topPos = Math.floor(Math.random() * (maxTop + 10))
$span.css({ left: leftPos, top: topPos }).fadeIn(2500); 
});
};
moveDiv();
setInterval(moveDiv, 2500);
</script>

我的问题是它们都从页面中的同一位置(左上角)开始，它们本身重叠，仅在第一次淡出期间。自第一次点击我的网页以来，如何让它们在页面周围的随机位置开始？

谢谢

米歇尔

Answer 1

给它们所有相同的类，例如logo并使用此类选择它们：

var $spans = $(".logo");

或者使用^选择器开始：

var $spans = $("[id^='logo']");

并使用each()将它们全部移动，并且应将位置设置为absolute以便left/top规则生效：

div{
position: absolute;
}

希望这有帮助。

function moveDiv() {
var $spans = $(".logo");
$spans.each(function(){
var _this = $(this);
_this.fadeOut(500, function() {
var maxLeft = $(window).width() - _this.width();
var maxTop = $(window).height() - _this.height();
var leftPos = Math.floor(Math.random() * (maxLeft + 10))
var topPos = Math.floor(Math.random() * (maxTop + 10))
_this.css({ left: leftPos, top: topPos }).fadeIn(100); 
console.log(leftPos,topPos);
});
});
};
moveDiv();
setInterval(moveDiv, 1000);

div{
position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo" id="logo" > LOGO</div>
<div class="logo" id="logo1" > LOGO 1</div>
<div class="logo" id="logo2" > LOGO 2</div>
<div class="logo" id="logo3" > LOGO 3</div>

Answer 2

在onload事件中的一些随机值上设置徽标的位置，例如：

$(window).load(function() {
// your init function with random values
});

Answer 3

这里有几个重要的时刻：

1. 如果您不动态添加图像，它们最初应该具有不同的top和left坐标，这样它们就不会从同一位置闪烁。
2. 您需要先加载图像或分配宽度/高度属性，然后才能获得正确的尺寸。您可以通过直接在 DOM 对象上分配属性来预加载它们src。
3. 您需要指定样式才能正确定位图像。我建议position: fixed;因为它相对于视口的位置，并且在页面滚动时不要移动元素。
4. 不需要额外的setInterval调用，因为fadeIn/fadeOut内部已经有计时器。

这是演示：

function moveDiv() {
var span = $("#container"),
images = [
'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a',
'http://cdn.sstatic.net/Sites/stackexchange/img/apple-touch-icon.png',
'http://cdn.sstatic.net/Sites/music/img/apple-touch-icon.png'
],
src,
wind = $(window),
left = function(width) {
return Math.floor(Math.random() * (wind.width() - width + 10));
},
top = function(height) {
return Math.floor(Math.random() * (wind.height() - height + 10));
},
updateCSS = function(img) {
var _this = img || this;
_this.css({
left: left(_this.width()),
top: top(_this.height())
});
},
cycle = function(img) {
var _this = img || this;
_this.fadeOut(2500, updateCSS.bind(_this)).fadeIn(500, cycle.bind(_this));
};
while (src = images.shift()) {
var img = $('<img />');
img[0].src = src; // preload image to get proper dimensions
updateCSS(img);
span.append(img);
cycle(img);
}
};
$(moveDiv);

#container img {
position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span id="container"></span>