在固定区域中随机移动图像

randomly move images in a fixed area

本文关键字：随机 移动 图像 区域      更新时间：2023-09-26

我正在使用此代码在一个区域中随机移动图像。但是我需要始终显示至少 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();
        });
    }
})();

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

这是我的主页的样子：

Image1          Image2

       Image3

我希望它看起来像：

       Image1
Image2        Image3

或

       Image1
       Image2  Image3

或与此图像的任何其他图案

您需要

使用 CSS 属性来更改它们在屏幕上的位置。

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

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

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

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

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>

相关文章：