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;
????//定時函數(shù)進行更新
????var update = setInterval(function() {
????????//進度改變
????????pro++;
????????//文字提示
????????$("#info").text(pro + "%");??//定時器開啟時改變百分比
????????//動態(tài)改變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>
