文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >同时将类应用于4个随机图像，然后一次模糊/淡出一个

问同时将类应用于4个随机图像，然后一次模糊/淡出一个
EN

Stack Overflow用户
提问于 2018-10-30 19:12:30
回答 1查看 62关注 0票数 2

我正在尝试在同一时间拥有这个展览的4个标志。然后，我想只模糊/淡出一个标志在一次，并被替换为另一个随机标志。

目前，下面的代码一次只显示一个徽标。

下面是指向科德芬的链接

​

代码语言：javascript
运行
复制
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);
代码语言：javascript
运行
复制
.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;
}
代码语言：javascript
运行
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<ul>
  <li class="client-1"><img 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 src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" ></li>
  <li class="client-7"><img 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 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>

​

javascript
jquery
html
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-10-30 19:48:30

好像你很接近你想要的东西。如果我的理解正确，你想从4个“不模糊”的图像开始，然后，在每个间隔，你想随机模糊其中一个不模糊的图像，随机模糊任何尚未模糊的图像。

基本上，您可以扩展代码中已经包含的逻辑，并将unblur类添加到4个映像中(您可以添加一个小启动函数，以便在setInterval开始之前随机应用unblur类，但我只是在下面的代码片段中的4个图像中手动添加了unblur类)。然后，您可以分别选择模糊组和非模糊组，而不是选择整个组的整组图像，并将随机逻辑应用于每个组，以确定哪些组会变得模糊/不模糊。

例如：

​

代码语言：javascript
运行
复制
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);
代码语言：javascript
运行
复制
.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;
}
代码语言：javascript
运行
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/53071359

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档