进度条制作

<div class="dis_in_bl info fleft">
<div class="sprite_index f1"></div>
<div class="deposit rel">
<div class="tit abs">存款到账</div>
<div class="tip abs">平均时间</div>
<div class="unit abs">秒</div>
<div class="num abs" id="deposit_num">27</div>
<div class="load sprite_load abs">
<div class="load_s sprite_load abs"></div>
<div class="load_e abs">
<div class="load_rate sprite_load abs" id="deposit"></div>
</div>
</div>
</div>
<div class="take rel">
<div class="tit abs">提款到账</div>
<div class="tip abs">平均时间</div>
<div class="unit abs">分</div>
<div class="num abs" id="take_num">2'35</div>
<div class="load sprite_load abs">
<div class="load_s sprite_load abs"></div>
<div class="load_e abs">
<div class="load_rate sprite_load abs" id="take"></div>
</div>
</div>
</div>
<div class="bank rel">
<div class="tit abs">便捷的银行服务</div>
<div class="icon abs">VISA 银联</div>
<div class="tip abs">目前我们支付机构有：</div>
<div class="unit abs">家</div>
<div class="num abs" id="bank_num">28</div>
</div>
<div class="scroll_h">
<div id="deposit_s">
<div></div>
</div>
<div id="take_s">
<div></div>
</div>
<div id="bank_s">
<div></div>
</div>
</div>

</div>

$(function(){

//rate_num_show
$("#deposit_s").scroll(function () {
setNumber("deposit","s");
});
$("#take_s").scroll(function () {
setNumber("take","m");
});
$("#bank_s").scroll(function () {
setNumber("bank","s");
});
$(window).scroll(function () {
scrollOn();
});
scrollOn();

}

function setRate(id,maxNum,value,time,easing){
var rate = Math.round(value*1000/maxNum)/10;
rate = rate-100;
if(rate > 0){rate = 0;}
if(id != "bank"){
$("#"+id).animate({"left":rate+"%"},time,easing,function(){});
}
$("#"+id+"_s").animate({scrollTop: value},time,easing,function(){});
}


function setNumber(id,type){
var value;
if(type == "s"){
value = $("#"+id+"_s").scrollTop();
value = Math.round(value);
}else if(type == "m"){
   var temp = $("#"+id+"_s").scrollTop();
temp = Math.round(temp);
value = Math.floor(temp/60)+"'";
if(temp%60 < 10){
value += "0"+(temp%60);
} else{
value += (temp%60);
}
}
$("#"+id+"_num").html(value);
}


function scrollOn(){
var showPosition = $(window).height() + $(window).scrollTop();
if(showPosition > 1000 && depositShow){
depositShow = false;
setRate("deposit",90,27,2000,"easeOutCirc");
}
if(showPosition > 1100 && takeShow){
takeShow = false;
setRate("take",240,155,2000,"easeOutCirc");
}
if(showPosition > 1200 && bankShow){
bankShow = false;
setRate("bank",90,28,2000,"easeOutSine");
}
}