今天实现一下图片进度条,觉得很有意思,故记录下来:
总的思路就是利用 position:absolute 的属性,将两张大小相同,颜色不同的图片重叠起来,通过控制上层图片的宽度显示出当前进度(当然如果有图片重复的需求,可以使用背景图的repeat属性,或者直接做一张重复的图片出来)。
首先,我们需要两张大小相同颜色不同的图片,然后设置dom结构;
<div class="downImg">
<div class="upImg style="width: 100%"></div>
</div>
然后设置样式:
.downImg{
width: 700px;
height: 45px;
position: relative;
}
.upImg{
position: absolute;
bottom: 0;
height: 100%;
max-width: 100%;
}
接下来通过控制 upImg 的 宽度即可实现进度条显示。
另外来说说,在只有两张图片的情况下,怎么做才能进度条上有很多张重复图片的效果,像这样:
我们可以使用背景图重复的样式来做,主要算好图片的宽度和容器的宽度,比如图片width:10px,我们需要十个图片重复,就给容器定个宽度为100px:
.downImg{
width: 700px;
height: 45px;
position: relative;
background: url(./car-dark.svg) 0 0 repeat-x;
background-size: contain;
}
.upImg{
position: absolute;
bottom: 0;
height: 100%;
max-width: 100%;
background: url(./car-light.svg) 0 0 repeat-x;
background-size: contain;
}
DOM 结构:
<div class="downImg">
<div class="upImg" style="width: 60%"></div>
</div>
效果如下: