我有以下代码,这是一个jquery进度栏。

此进度条将水平填充。如何使其从下到上垂直填充?

最佳答案

像这样http://jsbin.com/getazoju/1/

<style>
    .prog {
        height: 200px;
        width: 50px;
        border: 1px solid black;
        position: relative;
    }
    .filler {
        height: 0%;
        width: 50px;
        position: absolute;
        bottom: 0;
        background-color: black;
    }
</style>


<div class="prog">
    <div id="filler" class="filler"></div>
</div>


<script>
    var stepSize = 50;
    setTimeout((function () {
        var filler = document.getElementById("filler"),
            percentage = 0;
        return function progress() {
            filler.style.height = percentage + "%";
            percentage += 1;
            if (percentage <= 100) {
                setTimeout(progress, stepSize);
            }
        }

    }()), stepSize);
</script>

09-11 07:18