Question

我正在使用此代码在区域中随机移动图像。但我总是要展示至少3张图片。这就是我所做的：

HTML

<div class="fade">Image 1</div>
<div class="fade">Image 2</div>
<div class="fade">Image 3</div>
<div class="fade">Image 4</div>
<div class="fade">Image 5</div>
<div class="fade">Image 6</div>

的jQuery

(function fadeInDiv() {
    var divs = jQuery('.fade');
    var elem = divs.eq(Math.floor(Math.random() * divs.length));
    if (!elem.is(':visible')) {
        elem.prev().remove();
        elem.fadeIn(Math.floor(Math.random() * 1000), fadeInDiv);
    } else {

        elem.fadeOut(Math.floor(Math.random() * 1000), function() {
            elem.before('<div>&nbsp;</div>');
            fadeInDiv();
        });
    }
})();

此代码随机显示fadein和fadeout图像，一次显示2张图像，有时一次显示1张图像。我需要每次使用fadein淡出功能显示6张图像中的3张图像。

以下是我的主页的样子：

Image1          Image2


       Image3

我希望它看起来像：

       Image1

Image2        Image3

或

       Image1

       Image2  Image3

或带有此图像的任何其他图案

Answer 1

尝试使用延迟长度的递归算法，具体取决于对象的随机顺序：

window.refresh = function(delay) {
  delay *= 1000;
  var doms = [];
  var randos = [];
  var index = 0;

  function fadeout() {
    if (index < 3) {
      var random = $(doms.get(randos[index]));
      $(random).delay(delay + 200 * index).fadeTo(200, 0, function() {
        $(random).css("visibility", "hidden");
      });
      doms = doms.not(random);
      index++;
      fadeout(doms);
    }
  }

  doms = $('.grid-item');
  doms.css("visibility","visible");
  doms.css("opacity","1");
  var num = Math.floor(Math.random() * doms.length);
  for (var i = 0; i < doms.length; i++) {
    while (randos.indexOf(num) > -1) {
      num = Math.floor(Math.random() * doms.length);
    }
    randos.push(num);
  }
  fadeout();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
  <div class="grid-item">Image 1</div>
  <div class="grid-item">Image 2</div>
  <div class="grid-item">Image 3</div>
  <div class="grid-item">Image 4</div>
  <div class="grid-item">Image 5</div>
  <div class="grid-item">Image 6</div>
</div>
<br>
<button onclick="refresh(0)">Trigger Animation</button>
<br>
<br>
<input type="number" placeholder="Time in Seconds">
<button onclick="refresh($(this).prev().val())">Trigger Delayed Animation</button>

Answer 2

您需要使用css属性来更改其在屏幕上的位置。

你必须确定他们的定位风格，IE绝对。

elem.css('top','15px')和elem.css('left','15px')是在屏幕上移动对象的方法。您将15px调整为您需要的值。它相对于屏幕的左上角。

fadeIn / fadeOut仅更改屏幕上这些对象的不透明度属性。

随机移动固定区域的图像

2 个答案: