jquery+css 完成进度条功能

今天看到一篇文章是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  显示进度条部分：

 

<h2>Jquery+CSS 进度条</h2> <div class="graph"> <strong class="bar" style="width: 54%;" id="cut"><span>54%</span></strong> </div> <div class="graph"> <strong class="bar" style="width: 0%;" id="crea"><span></span></strong> </div> <input type=button οnclick="inseat()" value="增加10%"/>
4 动态控制的js代码：

<mce:script type="text/javascript"><!-- var a1 =0; function inseat() {a1=a1+10; alert(a1); $("#crea").width(a1+"%");//说明。如果没有明确指定单位（如：em或%），使用px。 } // --></mce:script>
好了。为了验证一下，我们看看结果。本来是想贴出效果图呢，可是发表时发现暂时关闭了上传图片功能。所以。。大家感兴趣的话，就自己运行一下吧。吼吼，

 

 

以后，我会添上贴图的。