Хотите размыть изображение после завершения процесса отслеживания - PullRequest
Новая
       15

Хотите размыть изображение после завершения процесса отслеживания

0 голосов
/ 09 июля 2019

Я создаю веб-сайт, на котором пользователь смотрит на экран отслеживания. На этом экране пользователь может видеть текущее состояние пакета. Как только первый процесс завершен, завершенный процесс затемняется, и текущее состояние светится. Вот код, который я написал на HTML и CSS 

li {
  list-style-type: none;
  float: left;
  margin: 10px;
}

.imgage {
  margin-top: 150px;
}

body h2 {
  font-family: sans-serif, 'Montserrat';
}
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<ul>
  <li>
    <div class="imgage">
      <img src="images/fil_1.jpg" width="202px" height="100px">
  </li>
</ul>
<ul>
  <li>
    <div class="imgage">
      <img src="images/export1.jpg" width="202px" height="100px">
      <h2>IMPORT</h2>
  </li>
</ul>
<ul>
  <li>
    <div class="imgage">
      <img src="images/UKimport.jpg" width="202px" height="100px">
      <h2>CARRIER</h2>
  </li>
</ul>
<ul>
  <li>
    <div class="imgage">
      <img src="images/DHL.jpg" width="202px" height="100px">
      <h2>DHL</h2>
  </li>
</ul>
<ul>
  <li>
    <div class="imgage">
      <img src="images/HMRC_logo.jpg" width="202px" height="100px">
      <h2>HMRC</h2>
  </li>
</ul>
<ul>
  <li>
    <div class="imgage">
      <img src="images/Importt.jpg" width="202px" height="100px">
  </li>
</ul>
</div>

1 Ответ

0 голосов
/ 09 июля 2019

Я изо всех сил старался понять, что ты хотел сделать.

Моя интерпретация заключается в том, что вы хотели размыть страницу во время загрузки, а затем показать загруженную страницу.

Я добавил код, чтобы сделать это, плюс я добавил код, чтобы эмулировать фотографии, которые не загружались, так как они не были включены в полный URI для их доступа.

Если по какой-либо причине это не то, что вы хотели, тогда, пожалуйста, отредактируйте ваш вопрос и дайте мне знать, чтобы я мог изменить свой ответ на него. 

// Emulating loading the photos
$(window).on('load', function() {
    $("#cover").fadeOut(200);
});

function callLoad(){
    $(window).load();
}
setTimeout(callLoad, 1000);

$(function() {
  
  $('.image').each(function(){
    let randomNumber = (Math.floor(Math.random() * 100) + 1);
    $(this).attr('src', 'https://picsum.photos/id/' + randomNumber + '/202/100');      
  });    

  var images = $('.image').sort(function (a, b) {
    return +$(a).data('sort') - +$(b).data('sort');
  });
  
  var index = 0;
  var getNextImage = function(index){
    var remainder = index % images.length;
    return $(images[(remainder === 0) ? images.length - 1 : remainder - 1]);
  };
    
  $("#btnNext").click(function(){    
    getNextImage(index - 1).addClass("blur-content");
    getNextImage(index).toggleClass("blur-content");   
    index++;
  });
  
});
li {
  list-style-type: none;
  float: left;
  margin: 10px;
}

.imgage {
  margin-top: 50px;
}

body h2 {
  font-family: sans-serif, 'Montserrat';
}

#cover {
  top:0; 
  left: 0;  
  position: fixed; 
  height: 100%; 
  width: 100%; 
  background: #CCC; 
  z-index:9999;
}

.blur-content {
    -webkit-filter: url(#svg-blur);
    filter: url(#svg-blur);
}
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<button id="btnNext"> Next </button>
<div id="cover" class="blur-content"></div>
<div>
  <ul>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/fil_1.jpg" width="202px" height="100px" data-sort="7">
        <h2>SOMETHING</h2>
    </li>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/export1.jpg" width="202px" height="100px" data-sort="2">
        <h2>IMPORT</h2>
    </li>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/UKimport.jpg" width="202px" height="100px" data-sort="3">
        <h2>CARRIER</h2>
    </li>
  </ul>

  <ul>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/DHL.jpg" width="202px" height="100px" data-sort="4">
        <h2>DHL</h2>
    </li>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/HMRC_logo.jpg" width="202px" height="100px" data-sort="5">
        <h2>HMRC</h2>
    </li>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/Importt.jpg" width="202px" height="100px" data-sort="6">
        <h2>HMRC2</h2>
    </li>
  </ul>
</div>

<!-- SVG Blur Filter -->
<!-- 'stdDeviation' is the blur amount applied -->
<svg id="svg-filter-blur">
    <filter id="svg-blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
    </filter>
</svg>
...