CSS垂直进度条

Question

垂直进度条

---

这个酒吧的正确造型需要:

• 进度条必须由包含多个横条的元素覆盖.

• 没有图像(即使用横条的图像).

• 进度条必须连接到原点的底部,并向上延伸.

• 最重要的是,进度条的包装宽度必须保持动态(%),不是静态定义的.

• 条形图的宽度根据其容器组件的宽度而延伸

• 纯CSS解决方案是最好的,但JQuery是公平的游戏.

---

---

进度条HTML:

<div class="container">
    <div class="attendance">
        <p class="title">attendance</p>
        <div class="attendance-bar">
            <div class="attendance-level"></div>
            <div class="attendance-cage-css">
                <div class="crossbar-1"></div>
                <div class="crossbar-2"></div>
                <div class="crossbar-3"></div>
                <div class="crossbar-4"></div>
                <div class="crossbar-5"></div>
                <div class="crossbar-6"></div>
                <div class="crossbar-7"></div>
                <div class="crossbar-8"></div>
                <div class="crossbar-9"></div>
            </div>
        </div>
    </div>
</div>

---

JS Fiddle包括HTML标记和所有CSS类:

http://jsfiddle.net/q2SAK/

我的进步:

http://jsfiddle.net/q2SAK/2/

---

奖金:

我为每个交叉开关实现了独特的类,以实现上面显示的它们之间的增加的边距.如果您知道如何在没有类的情况下实现效果,请竖起大拇指.在你的JS小提琴中显示它.

---

Answer 1

已接受的挑战！

我拿了你的小提琴并从中创造了这个。这是一个非常简单的演示，说明您可以用它做什么。您单击“单击我，它会从 5 像素变为 200 像素。当然，您可以将其设置为每次增加某个数字。不过，这只是其中的一部分。我刚刚在这里发布了我所做的一些更改，完整的代码在 jsfiddle

更新： 这一个由5像素每次你点击它上升。当然，你需要告诉它停止了，否则它会永远持续下去。

<div class="container">
        <div class="attendance">
            <p class="title">ATTENDANCE</p>
            <div class="attendance-bar">                
                <div class="attendance-level">
                    <div class="bar-1"></div>
                    <div class="bar-2"></div>
                    <div class="bar-3"></div>
                    <div class="bar-4"></div>
                    <div class="bar-5"></div>
                    <div class="bar-6"></div>
                    <div class="bar-7"></div>
                    <div class="bar-8"></div>
                    <div class="bar-9"></div>
                </div>
                <div class="attendance-cage-css"></div>
            </div>
        </div>
    </div>
<div id="changeatt" style="top:50px; left: 200px; position: absolute">Click me</div>

CSS

.container{
    width:100px;
    height:350px;
    position: absolute;
}

.attendance-bar{
    float:left;
    width:90%;
    margin:0px 5% 0px 5%;
    height:260px;
    background-color:#2f2f2f;
}

.attendance-cage-css{
    width:80px;
    float:left;
    background-color:#6ae719;
    height:5px;
    position: absolute;
    bottom: 20px;
    z-index: 1;
}

.bar-1,.bar-2,.bar-3,.bar-4,.bar-5,.bar-6,.bar-7,.bar-8,.bar-9{
    float:left;
    width:100%;
    background-color:#1f1f1f;
    height:10px;
    z-index: 9999;
}

.attendance-level{
    float:left;
    height:100px;
    width:80px;
    z-index: 9999;
    position: absolute;
    top:60px;
}

查询

$('#changeatt').click(function(){
    $('.attendance-cage-css').css('height', '200px');
});

更新 如果你想要一个最大高度，我会推荐像下面这样的东西。它将检查以确保进度条的高度不超过进度条容器的高度。

if($('.attendance-cage-css').height() < $('.attendance-bar').height()){
    $('.attendance-cage-css').css('height', $('.attendance-cage-css').height() + 5);
}

注意：如果您希望进度条达到最大高度，您必须将容器的高度设为增加进度条的倍数。例如，如果您将栏增加 5 像素，则容器的高度应为 260 像素、265 像素等。