Question

我正在创建一个网站，其中用户正在查看跟踪屏幕。在此屏幕中，用户可以查看包装的当前状态。一旦第一个过程完成，然后完成的过程就会模糊，并且当前状态会发光。这是我用HTML和CSS编写的代码

{
    "error": {
        "code": "RequestBroker--ParseUri",
        "message": "Could not find a property named 'e2_eec330f010b5491faac671a62db60b3c_hines_employeeId' on type 'Microsoft.OutlookServices.Contact'.",
        "innerError": {
            "request-id": "cda7f7b5-d00c-425e-a88b-d8397e5e799f",
            "date": "2019-07-09T15:28:09"
        }
    }
}

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

.imgage {
  margin-top: 150px;
}

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

Answer 1

我尽力了解您想做什么。

我的解释是，您希望在加载时模糊页面，然后显示加载的页面。

我添加了执行此操作的代码，并且添加了代码来模拟未加载的照片，因为它们未包含在完整的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>

想要在跟踪过程中完成过程后模糊图像

1 个答案: