javascript - 这种阶段性的进度条怎么做。
本文介绍了javascript - 这种阶段性的进度条怎么做。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
请问这种类似的效果图怎么做,或者有没有类似的demo链接发一下
解决方案
有两套图片(绿色的圆形图和灰色的圆形图,是不是灰色的我不清楚,反正就是默认的那种图),有两个颜色的进度线条,(灰色和绿色的),然后和楼上的思路是一样的,就是图片的两种class名称的切换,和两种class名称的线条的长度改变,比如(我只写线条的,懒得去找图片,反正方式是一样一样的):
.line{
position: relative;
}
.default{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
border-bottom: 2px solid #999;
border-top: none;
border-left: none;
border-right: none;
}
.runing{
position: absolute;
margin: 0;
padding: 0;
width: 80%;
border-bottom: 2px solid #e4393c;
border-top: none;
border-left: none;
border-right: none;
}
<div class="line">
<hr class="default"/>
<hr class="runing"/>
</div>
你要做的就是用js配合,动态修改runing的宽度就Ok了,那个图片其实也差不多的,根据runing的长度,来切换图片(你甚至可以把一切都写死,前提是该效果有多个页面,并且都是静态的页面)
这篇关于javascript - 这种阶段性的进度条怎么做。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文