进度栏从下到上填充 [英] Progress Bar Fill Up Bottom-To-Top

问题描述

所以，我有一个进度条.使用简单的颜色，它可以完美工作.当我放入图像时，它从上到下填充，而不是从下到上填充，而且我不知道如何修复它.帮助吗?

So, I have a progress bar. With simple colors, it works perfectly. When I put in images, it filles top-to-bottom, not bottom-to-top, and I don't know how to fix it. Help?

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;}

推荐答案

进行此类操作需要绝对定位和背景定位.添加这些

Absolute positioning and background positioning is required to do this kind of thing. Add these

#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已被弃用，不鼓励使用它. (必须将其包括给可能到这里而又不看评论的任何人.)

As others have noted, center has been deprecated and its use is discouraged. (Had to include that for anyone who might end up here and didn't look at the comments.)

这篇关于进度栏从下到上填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！