css 竖行进度图_jquery – CSS垂直进度条

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