您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > jQuery特效 >

    jquery可控制调节进度条代码

    时间:2014-07-30 08:36 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    效果预览 进入下载地址列表

    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>

    jquery可控制调节进度条代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/jQuerytexiao/9878.html 源码搜藏承诺:本站所有资源无病毒,无弹窗,无干扰链接!