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

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

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

Answer 2

给他们都一样 class 例如 logo 和 select 他们使用这个 class :

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

或使用 ^ select 或 :

开头

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 3

这里有几个重要时刻：

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

这是演示：

function moveDiv() {
  var span = $("#container"),
    images = [
      'https://cdn.sstatic.net/Sites/Whosebug/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>

Javascript 对象以随机位置开始

Javascript object starting with random position

javascript

object

random

overlap