Question

我正在尝试同时显示4个徽标。然后，我只想一次模糊/淡入一个徽标，然后换成另一个随机徽标。

当前下面的代码一次仅显示1个徽标。

的链接

npm run {NPM_SCRIPT_NAME}

setInterval(function(){
  var logoGrp = $('ul li').length;
  var randomNum = Math.floor(Math.random() * logoGrp);
  $("ul li img").removeClass("unblur");
  $("ul li:nth-child(" + randomNum + ") img").addClass("unblur");
}, 4000);

.content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style: none;
  position: relative;
  min-height: 500px;
  li {
    position: absolute;
    &.client-1 {
      top: 55px;
      left: 45px;
    }
    &.client-2 {
      top: 0;
      left: 375px;
    }
    &.client-3 {
      top: 134px;
      left: 250px;
    }
    &.client-4 {
      top: 0;
      right: 0;
    }
    &.client-5 {
      top: 100px;
      right: 276px;
    }
    &.client-6 {
      top: 182px;
      right: 45px;
    }
    &.client-7 {
      bottom: 175px;
      left: 0;
    }
    &.client-8 {
      bottom: 88px;
      left: 376px;
    }
     &.client-9 {
      bottom: 0;
      left: 123px;
    }
     &.client-10 {
      bottom: 170px;
      right: 233px;
    }
     &.client-11 {
      bottom: 89px;
      right: 0;
    }
     &.client-12 {
      bottom: 25px;
      right: 123px;
    }
  }
}


img { 
  position: relative;
  float: left;
  display: block;
  width: 300px;
}

img {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  transition: filter linear 1s, transform 1s, opacity 1s ;
  opacity: .25;
}

.unblur {
  -webkit-filter: blur(0px);
  filter: blur(0px);
  transition: filter linear 1s, transform 3s, opacity 1s ;
  transform: perspective(500px) translateZ(100px); 
  opacity: 1;
}

Answer 1

似乎您已接近所追求的目标。如果我理解正确，那么您想从“未模糊”的4张图像开始，然后，在每个间隔上，您要随机模糊其中一张未模糊的图像，并随机取消任何尚未模糊的图像。

基本上，您可以扩展代码中已有的逻辑，并将unblur类添加到图像的4个中（可以添加一个小启动器函数来随机应用unblur类在您的setInterval开始之前，但我只是将unblur类手动添加到下面的代码段中的4张图像中。然后，您无需选择整个图像组并将随机模糊/不模糊应用于整个组，而是可以分别选择模糊和不模糊的组，然后将随机逻辑应用于每个图像，以确定各个组中哪个模糊/不模糊

例如：

setInterval(function() {
  var unblurred = $('.unblur');
  var blurred = $('ul li img:not(.unblur)');
  var u = Math.floor(Math.random() * unblurred.length);
  var b = Math.floor(Math.random() * blurred.length);
  $(unblurred[u]).removeClass('unblur');
  $(blurred[b]).addClass('unblur');
}, 4000);

.content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style: none;
  position: relative;
  min-height: 500px;
  li {
    position: absolute;
    &.client-1 {
      top: 55px;
      left: 45px;
    }
    &.client-2 {
      top: 0;
      left: 375px;
    }
    &.client-3 {
      top: 134px;
      left: 250px;
    }
    &.client-4 {
      top: 0;
      right: 0;
    }
    &.client-5 {
      top: 100px;
      right: 276px;
    }
    &.client-6 {
      top: 182px;
      right: 45px;
    }
    &.client-7 {
      bottom: 175px;
      left: 0;
    }
    &.client-8 {
      bottom: 88px;
      left: 376px;
    }
    &.client-9 {
      bottom: 0;
      left: 123px;
    }
    &.client-10 {
      bottom: 170px;
      right: 233px;
    }
    &.client-11 {
      bottom: 89px;
      right: 0;
    }
    &.client-12 {
      bottom: 25px;
      right: 123px;
    }
  }
}

img {
  position: relative;
  float: left;
  display: block;
  width: 300px;
}

img {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  transition: filter linear 1s, transform 1s, opacity 1s;
  opacity: .25;
}

.unblur {
  -webkit-filter: blur(0px);
  filter: blur(0px);
  transition: filter linear 1s, transform 3s, opacity 1s;
  transform: perspective(500px) translateZ(100px);
  opacity: 1;
}

<div class="content">
  <ul>
    <li class="client-1"><img class="unblur" src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png"></li>
    <li class="client-2"><img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png"></li>
    <li class="client-3"><img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png"></li>
    <li class="client-4"><img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png"></li>
    <li class="client-5"><img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png"></li>
    <li class="client-6"><img class="unblur" src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png"></li>
    <li class="client-7"><img class="unblur" src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png"></li>
    <li class="client-8"><img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png"></li>
    <li class="client-9"><img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png"></li>
    <li class="client-10"><img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png"></li>
    <li class="client-11"><img class="unblur" src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png"></li>
    <li class="client-12"><img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png"></li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

将类别同时应用于4张随机图像，然后一次模糊/淡入淡出

1 个答案: