CSS 垂直进度条

Question

CSS 垂直进度条

jqueryhtmlcss

6

垂直进度条

正确的样式需要：

进度条必须被一个包含一定数量横向条纹的元素覆盖。
不使用图片（如使用横向条纹的图片）。
进度条必须附着在起点的底部并向上延伸。
最重要的是，进度条的包装器宽度必须保持动态（％），而非静态定义。
进度条的宽度取决于其容器组件的宽度。
最好采用纯CSS解决方案，但JQuery也可以。

enter image description here

进度条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>

包含HTML标记和所有CSS类的JS Fiddle：

http://jsfiddle.net/q2SAK/

我的进展：

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

奖励：

为了实现上述交叉杆之间的递增边距，我为每个交叉杆实现了唯一的类。如果你知道如何在没有类的情况下实现该效果，请在你的JS Fiddle中展示。

- user2700923

3

这是一个挑战吗？还是你要展示你已经拥有的东西？ - Spokey

我所拥有的完全不起作用，如果这不违反规则的话，我打算让它成为一个挑战。@Spokey - user2700923

1

我认为你可以从这里处理，你主要需要设置父元素的position属性，以便让position:absolute;使用父元素的宽度。http://jsfiddle.net/q2SAK/4/ - Spokey

1

基本上，这种方法允许您将“绝对定位的子元素”相对于它们的“父元素”而不是“body”进行定位。 - Spokey

1

通常只有带有 position:absolute; 属性的元素的父级需要它。但是根据结构，它可能一直到 body。我没有真正查看你的 fiddle，只是到处添加以确保 :D（实际上，你不需要为 container 和 attendance-bat 添加它） - Spokey

显示剩余5条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- imtheman · Accepted Answer

接受挑战！

我拿到了你的小提琴，并从中创建了这个。这是一个非常简单的演示，展示了你可以用它做什么。点击“点我”，它就会从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;
}

JQuery

$('#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像素等。