javascript - 在图像上方随机更改不同div的不透明度级别

我正在尝试随机更改不同div的不透明度级别，这些不透明度级别覆盖了固定的背景图像，但到目前为止还没有运气。.我已链接了下面的代码，这是我能获得的最接近的代码。 （对不起，我是一个新手。）

我希望它像此网站http://www.cecchi.net/en一样工作

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

         elem.animate({
             opacity: (Math.random() * 1)
         }, Math.floor(Math.random() * 1000), function () {
             elem.before('<img>');
             window.setTimeout(fadeInDiv);
             //fadeInDiv();
         });
     }
 })();

.thumbnail {
  width: 540px;
  height: 300px;
  position: relative;
}

#demoimg {
  height: 300px;
  width: 540px;
}

.overlay {
  top: 0;
  left: 0;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="thumbnail" id="thumb">
  <img id="demoimg" src="http://www.cecchi.net/public/images/3/header-cecchi-headerimage.jpg">
  <div class="overlay">
    <span><img class="fade" src="http://placehold.it/180x220"/></span><span><img class="fade" src="http://placehold.it/180x220" /></span><span><img class="fade" src="http://placehold.it/180x220" /></span>
  </div>
</div>

最佳答案

您的解决方案几乎接近一个良好的结果。

但是，它缺乏“动态”。我对您的代码进行了重新设计，以增加更多的平滑度和可伸缩性。

// array shuffling method
function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

(function fadeInDiv() {
  var divs = $('.fade'),
    divLength = divs.length,
    arrayToFade = [];

  // populate the array
  for (i = 0; i < divLength; i++) {
    arrayToFade.push(i);
  }
  // shuffle the array and taking half the amount of total divs
  arrayToFade = shuffle(arrayToFade);
  arrayToFade = arrayToFade.slice(0, (divLength / 2));

  // apply animation to all taken divs - speeds up the animation process
  $.each(arrayToFade, function(key, val) {
    divs.eq(val).animate({
      opacity: (Math.random() * 1)
    }, 1000, function() {
      window.setTimeout(fadeInDiv);
    });
  });
})();

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-width: 100vw;
}

.thumbnail {
  width: 100%;
  height: 100vh;
  float: left;
  position: relative;
  background-image: url(http://www.cecchi.net/public/images/3/header-cecchi-headerimage.jpg);
  background-size: cover;
}

.overlay {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

.fade {
  background: rgba(168, 99, 37, .4);
  display: block;
  float: left;
  width: 33.333%;
  height: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail" id="thumb">
  <div class="overlay">
    <span class="fade"></span>
    <span class="fade"></span>
    <span class="fade"></span>
    <span class="fade"></span>
    <span class="fade"></span>
    <span class="fade"></span>
  </div>
</div>

关于javascript - 在图像上方随机更改不同div的不透明度级别，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44069990/