CSS垂直进度条
垂直进度条
这个酒吧的正确造型需要：
-
进度条必须由包含多个横条的元素覆盖。
-
没有图像（即使用横条的图像）。
-
进度条必须连接到原点的底部，并向上延伸。
-
最重要的是，进度条的包装宽度必须保持动态（％），而不是静态定义。
-
条形图的宽度根据其容器组件的宽度而延伸
-
纯CSS解决方案是最好的，但JQuery是公平的游戏。
进度条HTML：
attendance
JS Fiddle包括HTML标记和所有CSS类：
http://jsfiddle.net/q2SAK/
我的进步：
http://jsfiddle.net/q2SAK/2/
奖金：
我为每个交叉开关实现了唯一的类，以实现上面显示的它们之间的增加的边距。 如果您知道如何在没有类的情况下实现效果，请竖起大拇指。 在你的JS小提琴中显示它。
接受挑战！
我拿起你的小提琴并从中创造了这个 。 这是一个非常简单的演示，说明你可以用它做什么。 你点击“点击我，它从5px变为200px。当然你可以使它每次增加一定数量。但这只是它的公正。我刚刚在这里发布了一些我做的变化，完整的代码在jsfiddle上
更新：每次点击它都会增加5px。 当然你需要告诉它要停止，否则它会永远持续下去。
ATTENDANCE
Click me
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); }
注意：如果希望条形达到最大高度，则必须使容器的高度为增加进度条的倍数。 例如，如果您将条形图增加5px，则容器的高度应为260px，265px等。