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等.