以随机位置开头的 Javascript 对象答案

【问题标题】：Javascript object starting with random position以随机位置开头的 Javascript 对象
【发布时间】：2016-11-23 14:42:31
【问题描述】：

我有 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>

我的问题是它们都从页面中的相同位置（左上角）开始，它们彼此重叠，仅在第一次淡出期间。自从第一次点击我的网页后，如何让它们在页面周围的随机位置开始？

谢谢，

米歇尔

【问题讨论】：

标签： javascript object random overlap

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

这里有几个重要的时刻：

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

【讨论】：