源码搜藏网

jquery可控制调节进度条代码jquery可控制调节进度条代码是一款基于jquery实现的项目步骤进度条效果，点击进度调调节进度，输出百分比调节进度。jquery进度条百分比调节进度

<script>
<!--tabjs begin-->
 $(function(){
$(".miaoshu div").css("display","none");
$(".c1").click(function(){
$(this).parent().parent().find(".miaoshu .miaoshu1").toggle(500).siblings().fadeOut();
})
 $(".c2").click(function(){
$(this).parent().parent().find(".miaoshu .miaoshu2").toggle(500).siblings().fadeOut();
})
$(".c3").click(function(){
$(this).parent().parent().find(".miaoshu .miaoshu3").toggle(500).siblings().fadeOut();
})
$(".c4").click(function(){
$(this).parent().parent().find(".miaoshu .miaoshu4").toggle(500).siblings().fadeOut();
})
$(".c5").click(function(){
$(this).parent().parent().find(".miaoshu .miaoshu5").toggle(500).siblings().fadeOut();
})
 
$(".c6").click(function(){
$(this).parent().parent().find(".miaoshu .miaoshu6").toggle(500).siblings().fadeOut();
}) 
<!--tabjs over-->
 
<!--初始化根据数字显示进度begin-->
var bfb = $(".miaoshu1 .span1").text();
bfb =bfb*140/100;
$(".bfb1 img").animate({width:bfb+"px"})

 var bfb = $(".miaoshu2 .span2").text();
bfb =bfb*140/100;
$(".bfb2 img").animate({width:bfb+"px"})

var bfb = $(".miaoshu3 .span3").text();
bfb =bfb*140/100;
$(".bfb3 img").animate({width:bfb+"px"})

var bfb = $(".miaoshu4 .span4").text();
bfb =bfb*140/100;
$(".bfb4 img").animate({width:bfb+"px"})

var bfb = $(".miaoshu5 .span5").text();
bfb =bfb*140/100;
$(".bfb5 img").animate({width:bfb+"px"})

var bfb = $(".miaoshu6 .span6").text();
bfb =bfb*140/100;
$(".bfb6 img").animate({width:bfb+"px"})

<!--初始化根据数字显示进度over-->
 

    <!--点击进度条调整进度_调整数字改变进度 begin-->
$(".bfb1").click(function(e){
$(this).parent().parent().find(".miaoshu .miaoshu1").fadeIn().siblings().fadeOut();
 x=$(this).offset();
     var ep =   e.pageX - x.left;
     $(".bfb1 img").animate({width:ep+"px"});
var bfb = $(".miaoshu1 .span1").text();
bfb = ep*100/140;
$(".miaoshu1 .span1").text(parseInt(bfb));
})
     $(".miaoshu1 .span1").blur(function(){
var bfb = $(".miaoshu1 .span1").text(); bfb =bfb*140/100; $(".bfb1 img").animate({width:bfb+"px"});
})
 
     $(".bfb2").click(function(e){
$(this).parent().parent().find(".miaoshu .miaoshu2").fadeIn().siblings().fadeOut();
 x=$(this).offset();
     var ep =   e.pageX - x.left;
     $(".bfb2 img").animate({width:ep+"px"});
var bfb = $(".miaoshu2 .span2").text();
bfb = ep*100/140;
$(".miaoshu2 .span2").text(parseInt(bfb));
})
     $(".miaoshu2 .span2").blur(function(){
var bfb = $(".miaoshu2 .span2").text(); bfb =bfb*140/100; $(".bfb2 img").animate({width:bfb+"px"});
})
 
$(".bfb3").click(function(e){
$(this).parent().parent().find(".miaoshu .miaoshu3").fadeIn().siblings().fadeOut();
 x=$(this).offset();
     var ep =   e.pageX - x.left;
     $(".bfb3 img").animate({width:ep+"px"});
var bfb = $(".miaoshu3 .span3").text();
bfb = ep*100/140;
$(".miaoshu3 .span3").text(parseInt(bfb));
})
     $(".miaoshu3 .span3").blur(function(){
var bfb = $(".miaoshu3 .span3").text(); bfb =bfb*140/100; $(".bfb3 img").animate({width:bfb+"px"});
})
 
$(".bfb4").click(function(e){
$(this).parent().parent().find(".miaoshu .miaoshu4").fadeIn().siblings().fadeOut();
 x=$(this).offset();
     var ep =   e.pageX - x.left;
     $(".bfb4 img").animate({width:ep+"px"});
var bfb = $(".miaoshu4 .span4").text();
bfb = ep*100/140;
$(".miaoshu4 .span4").text(parseInt(bfb));
})
     $(".miaoshu4 .span4").blur(function(){
var bfb = $(".miaoshu4 .span4").text(); bfb =bfb*140/100; $(".bfb4 img").animate({width:bfb+"px"});
})
 
 
$(".bfb5").click(function(e){
$(this).parent().parent().find(".miaoshu .miaoshu5").fadeIn().siblings().fadeOut();
 x=$(this).offset();
     var ep =   e.pageX - x.left;
     $(".bfb5 img").animate({width:ep+"px"});
var bfb = $(".miaoshu5 .span5").text();
bfb = ep*100/140;
$(".miaoshu5 .span5").text(parseInt(bfb));
})
     $(".miaoshu5 .span5").blur(function(){
var bfb = $(".miaoshu5 .span5").text(); bfb =bfb*140/100; $(".bfb5 img").animate({width:bfb+"px"});
})
 
$(".bfb6").click(function(e){
$(this).parent().parent().find(".miaoshu .miaoshu6").fadeIn().siblings().fadeOut();
 x=$(this).offset();
     var ep =   e.pageX - x.left;
     $(".bfb6 img").animate({width:ep+"px"});
var bfb = $(".miaoshu6 .span6").text();
bfb = ep*100/140;
$(".miaoshu6 .span6").text(parseInt(bfb));
})
     $(".miaoshu6 .span6").blur(function(){
var bfb = $(".miaoshu6 span6").text(); bfb =bfb*140/100; $(".bfb6 img").animate({width:bfb+"px"});
})
 
 
    <!--点击进度条调整进度_调整数字改变进度 度over-->
 
 
 })
</script>