進度欄從下到上填充

Question

所以，我有一個進度欄。 使用簡單的顏色，它可以完美工作。 當我放入圖像時，它從上到下而不是從下到上填充，而且我不知道如何解決。 救命？

http://jsfiddle.net/Aiphira/1k8sddvq/

    <div id="load-form">
    <div class="load-line"></div>
</div>
<center>
<div class="percent"></div>
<div class="asd">2000</div>
</center>



$(document).ready(function(e) {

            var maxonline = 6000;
            var currentonline = $(this).find('.asd').html();
            var percent = currentonline/maxonline*100;
            if(percent > 100)
                percent = 100;
            if(currentonline > maxonline) {
                alert('Its full');
                return;
            }
            $('.load-line').animate({height: percent+'%' },500);
            $('.percent').html(percent+'%')

    });



#load-form { width:137px; height:87px; background:url('http://la2portal.us.lt/status_online_simple.png'); margin:100px auto 0;  position:relative; } 
#load-form .load-line { background:url('http://la2portal.us.lt/status_online_full.png'); height:0; width:137px; bottom:4px; left:6px; max-height:87px;}

Answer 1

選項1：

.load-form, .load-line{
  vertical-align:bottom
}

選項2：

.load-line{
  position:absolute;
  bottom:0;
}

Answer 2

做這種事情需要絕對定位和背景定位。 添加這些

#load-form .load-line {
    position: absolute;
    background: url('http://la2portal.us.lt/status_online_full.png') no-repeat bottom;

 $(document).ready(function(e) { var maxonline = 6000; var currentonline = $(this).find('.asd').html(); var percent = currentonline/maxonline*100; if(percent > 100) percent = 100; if(currentonline > maxonline) { alert('Its full'); return; } $('.load-line').animate({height: percent+'%' },500); $('.percent').html(percent+'%') }); 

 #load-form { width: 137px; height: 87px; background: url('http://la2portal.us.lt/status_online_simple.png'); margin: 100px auto 0px; position: relative; } #load-form .load-line { position: absolute; background: url('http://la2portal.us.lt/status_online_full.png') no-repeat bottom; height: 0px; width: 137px; bottom: 0px; max-height: 87px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="load-form"> <div class="load-line"></div> </div> <center> <div class="percent"></div> <div class="asd">2000</div> </center> 

正如其他人指出的那樣，不贊成使用center ，不建議使用它。 （必須將其包括給可能在這里沒有看評論的人。）

Answer 3

我對您的代碼進行了一些操作，請檢查此JSFiddle 。

不知道這是否可行，這是一種解決方法。

我要做的是先將值設置為0 ，然后再設置為100 - % 。

我希望這有幫助。

Answer 4

我嘗試通過在頂部添加另一個灰色層並使其尺寸縮小的粗略方法。 這有助於創建綠色層實際上是從底部填充的錯覺。 看一看！ http://jsfiddle.net/Lgnk5mnz/2/

在div Cover類中添加HTML：

<div id="load-form">
    <div class="load-line"></div>
    <div class="cover"></div>
</div>
<center>
    <div class="percent"></div>
    <div class="asd">2000</div>
</center>

CSS為封面類添加CSS：

#load-form {
    width:137px;
    height:87px;
    background:url('http://la2portal.us.lt/status_online_simple.png');
    margin:100px auto 0;
    position:relative;
}
#load-form .load-line {
    background:url('http://la2portal.us.lt/status_online_full.png');
    height:87px;
    width:137px;
    bottom:4px;
    left:6px;
    max-height:87px;
}
#load-form .cover {
    width:137px;
    height:87px;
    background:url('http://la2portal.us.lt/status_online_simple.png');
    margin:-87px auto 0;
    position:relative;
}

最后，為Cover類設置動畫，並刪除加載線的動畫。 $（document）.ready（function（e）{

    var maxonline = 6000;
    var currentonline = $(this).find('.asd').html();
    var percent = currentonline / maxonline * 100;
    if (percent > 100) percent = 100;
    if (currentonline > maxonline) {
        alert('Its full');
        return;
    }
    $('.cover').animate({
        height: 100 - percent + '%'
    }, 500);
    $('.percent').html(percent + '%')

});

Answer 5

在這里，您可以訪問http://jsfiddle.net/5x275eh1/ 。 我只改變了你的CSS

    #load-form { width:137px; height:87px; background:url('http://la2portal.us.lt/status_online_simple.png'); margin:100px auto 0;  position:relative; bottom:4px; left:6px;} 
    #load-form .load-line { background:url('http://la2portal.us.lt/status_online_full.png'); height:0; width:137px;  max-height:87px;}
.load-line {
    transform: rotateX(180deg);
position:absolute;
    bottom:0px; left:0px;
}