day05 模糊图片加载

最新推荐文章于 2023-09-05 21:18:53 发布

qq_45738402

最新推荐文章于 2023-09-05 21:18:53 发布

阅读量188

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_45738402/article/details/125846238

版权

这里写目录标题

模糊图片加载
- html
- css
- js

模糊图片加载

html

<div class="container">
        <div class="progress">0%</div>
    </div>
    <script src="index.js"></script>

css

*{
  padding: 0;
  margin: 0;
}
body{
  width: 100vw;
  height: 100vh;
}
.container{
  background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2F0ffd1f237fc86ca393c61ba302f1eb4c059c8f7a.png&refer=http%3A%2F%2Fi2.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660706343&t=9ac6d3d9a9cbe110066a045b2d8c2305')
            no-repeat center center/cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  filter: blur(0px);
  .progress{
    font-size: 50px;
    color: #ffffff;
  }
}

js

window.onload = function (){
    const progress = document.getElementsByClassName('progress')[0];
    const bg = document.getElementsByClassName('container')[0];
    // 将 0到100 映射到 0到1 范围中
    const scale = (num, in_min, in_max, out_min, out_max) => {
        return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
    }
    let load = 0;
    let int = setInterval(blurring,30);
    function blurring(){
        load++;
        if(load > 99){
            clearInterval(int);
        }
        progress.innerHTML = `${load}%`;
        progress.style.opacity = scale(load,0,100,1,0);
        bg.style.filter = `blur(${scale(load,0,100,30,0)}px)`;
    }
}