垂直进度条
这个酒吧的正确造型需要：
>进度条必须由包含多个横条的元素覆盖.
>没有图像(即使用横条的图像).
>进度条必须连接到原点的底部,并向上延伸.
>最重要的是,进度条的包装宽度必须保持动态(％),而不是静态定义.
>条形图的宽度根据其容器组件的宽度而延伸
>纯CSS解决方案是最好的,但JQuery是公平的游戏.
进度条HTML：
JS小提琴包括HTML标记&所有CSS类：
我的进步：
奖金：
我为每个交叉开关实现了独特的类,以实现上面显示的它们之间的增加的边距.如果您知道如何在没有类的情况下实现效果,请竖起大拇指.在你的JS小提琴中显示它.
最佳答案
接受挑战！
我拿走了你的小提琴并从中创造了this.这是一个非常简单的演示,说明你可以用它做什么.你点击“点击我,它从5px到200px.当然你可以让它每次都增加一定数量.但这只是它的公正.我刚刚在这里发布了一些我做的改变,完整的代码在jsfiddle上
更新：this每次点击它都会增加5px.当然你需要告诉它要停止,否则它会永远持续下去.
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等.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。