垂直进度条
此栏的正确样式需要:
进度条必须被包含多个交叉条的元素覆盖。
无图像(即使用横杆图像)。
进度条必须贴在原点底部,并向上延伸。
最重要的是,进度条的包装器宽度必须保持动态 (%),而不是静态定义。
栏的宽度根据其容器组件的宽度拉伸(stretch)
纯 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 类:
我的进步:
奖励:
我为每个横杆实现了独特的类,以实现如上所示的它们之间不断增加的边距。如果您知道如何在没有类的情况下实现效果,请竖起大拇指。在您的 JS Fiddle 中显示它。
最佳答案
接受挑战!
我拿了你的 fiddle 并创建了 this从中。这是一个非常简单的演示,说明您可以用它做什么。你点击“点击我,它从 5px 到 200px。当然你可以让它每次都增加一定的数字。不过这只是它的一部分。我只是在这里发布了我所做的一些更改,完整的代码在 jsfiddle 上
更新: this每次单击它时,一个会上升 5px。当然,您需要告诉它停止,否则它会永远持续下去。
<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 像素等。
关于jquery - CSS 垂直进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22337851/