javascript - 随机更改图像顶部不同 div 的不透明度级别

Question

我正在尝试随机更改覆盖固定背景图像的不同 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>

Answer 1

您的解决方案非常接近理想结果。

但是，它缺乏“活力”。我重新编写了您的代码以增加更多的流畅性和可扩展性。

// 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>