Question

我刚刚找到动画进度条here

我想知道在加载这些进度条时，如何为每个条添加运行数％。

请帮忙。谢谢！

这是CSS

    <style type='text/css'>
    .progress_container {
    height:25px;
    border-radius: 3px;
    overflow:hidden;
    background:red;
    width: 460px;
}
.progress_bar {
    height:25px;
    width: 0px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    background:black;
}
.progress_container {
    margin-bottom: 30px;
}
}
  </style>

这是JQuery

  <script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$("document").ready(function () {

    // animate the progress bar onload

    $('.progress_bar').each(function () {
        $(this).animate({
            width: this.title
        }, 1000);
    })

});
});//]]>  

</script>

这是身体

  <div class="progress_container">
    <div class="progress_bar tip" title="98%"></div>
</div>
<div class="progress_container">
    <div class="progress_bar tip" title="58%"></div>
</div>
<div class="progress_container">
    <div class="progress_bar tip" title="28%"></div>
</div>

Answer 1

您可以使用步骤方法：

$('.progress_bar').each(function () {
    $(this).animate(
      {
         width: this.title
      }, {
        duration: 1000,
        step    : function( current ) {
                    $(this).html(parseInt(current, 10)+'%')
        }
    });
});

FIDDLE

Answer 2

不是将百分比放入标题中，而是将值放入数据元素并计算百分比，然后您可以轻松添加到它：

HTML：

<div class="progress_container">
    <div class="progress_bar tip" id="pb3" data-percent="28"></div>
</div>

<button id="Add">Add</button>

JS：

$("document").ready(function () {
    // animate the progress bar onload
    updatePercent();
});

function updatePercent() {

    $('.progress_bar').each(function () {
        $(this).animate({
            width: $(this).data("percent") + "%"
        }, 1000);
    })
}

$("#Add").click(function () {
    var currVal = $("#pb3").data("percent");
    $("#pb3").data("percent", currVal + 10);
    updatePercent();
});

更新了小提琴：http://jsfiddle.net/mWdgz/32/

Answer 3

尝试添加另一个div并添加一些css以根据需要定位文本。

这是jsFiddle

<div class="progress_container">
    <div id="progress"></div>
    <div class="progress_bar tip" title="100%"></div>
</div>

<强> CSS

#progress {
    color: white;
    position: absolute;
    left: 50%;
}

进度条的百分比

3 个答案: