javascript - 在跟踪过程中完成该过程后想要模糊图像
问题描述
我正在创建一个网站,其中用户正在查看跟踪屏幕。在这个屏幕中,用户可以看到包裹的当前状态。一旦第一个过程完成,完成的过程就会变得模糊,当前状态会发光。这是我用 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>
解决方案
我尽力了解你想做什么。
我的解释是,您想在加载内容时模糊页面,然后显示加载的页面。
我添加了代码来执行此操作,另外我添加了一个代码来模拟未加载的照片,因为它们没有包含在完整的 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>
推荐阅读
- reactjs - 将脊椎动画与 React 集成
- sql - ORACLE - 更新 xml 中的多个属性
- image - 将图像从 wpf 应用程序拖放到 uwp 应用程序
- flask - Flask-Admin:将 WYSIWYG 编辑器添加到内联模型?
- php - 阅读谷歌电子表格时获取单元格位置
- javascript - VueJS - 性能最佳实践:一个单独的模态还是在组件中存储一个模态?
- python - 使用 python 从列表中删除目录路径并将所有文件名放在列表中
- wordpress - 显示自定义分类术语内的帖子计数
- z3 - 为什么 z3 的这种传递闭包会产生不同的结果?
- ruby-on-rails - Sidekiq 作业错误处理并在父作业中重试?