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

给他们所有相同的类，例如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 3

这里很少有重要的时刻：

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

Javascript对象以随机位置开头

3 个答案: