今天看到一篇文章是css打造进度条。然后自己做成动态的进度条,同样,使用到css和jauery,请看:
1 首先,需要引入jquery.js文件。
<script src="Content/jquery.js" type="text/javascript"></script>
2 所用到的样式部分:
<style>
.graph {
position: relative;
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
margin-bottom: .5em;
}
.graph .bar {
display: block;
position: relative;
background: #37709B;
text-align: left;
color: #fff;
height: 1em;
line-height: 1em;
}
.graph .bar span { position: absolute; left: 1em; }
</style>
3 显示进度条部分:
4 动态控制的js代码:
好了。为了验证一下,我们看看结果。本来是想贴出效果图呢,可是发表时发现暂时关闭了上传图片功能。所以。。大家感兴趣的话,就自己运行一下吧。吼吼,
以后,我会添上贴图的。