html部分
<div class="xianshi">
<div class="yidong"><img src="img/yidong.png"></div> //背景
<div class="che"><img src="img/che.png"></div> //车
<div id="parent"> //进度条的大框
<div id="child"></div> //会改变的进度条
</div>
<p id="info"></p> //百分比
</div>
css部分
.xianshi {
width: 90%;
height: 100%;
overflow: hidden;
margin: auto;
}
.yidong{
width: 90%;
height: 2.8rem;
margin: 2.38rem auto 0;
}
.yidong img{
width: 100%;
height: 100%;
}
.che{
position: absolute;
width: 1.41rem;
height: 0.47rem;
left: -10%;
top: 4.75rem;
}
.che img{
width: 100%;
height: 100%;
}
#parent {
border: 1px #3896dd solid;
width: 100%;
height: 0.16rem;
margin: 0 auto;
border-radius: 50px;
overflow: hidden;
}
#child {
width: 100%;
height: 100%;
background-color: #3896dd;
}
p {
text-align: center;
color: #3896dd;
font-size: 0.28rem;
}
js部分
<script>
var pro = 0;
//定时函数进行更新
var update = setInterval(function() {
//进度改变
pro++;
//文字提示
$("#info").text(pro + "%"); //定时器开启时改变百分比
//动态改变div的宽度占比
$("#child").width(pro + "%"); //定时器开启时改变进度条的宽度
var a = $(".che").offset().left; 获取车的left
$('.che').animate({ //定时器开启时改变车的left
left: '87%'
}, 3000, 'linear') //三秒均速
//控制更新
if (pro == 100) {
//清除定时器，停止更新
clearInterval(update);
$('.xianshi').css('display', 'none');
}
}, 30);
</script>
