谁能给个jquery简单的进度条的代码

如题,谢谢

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>数据栏百分比动画显示</title>
<style type="text/css">
.item{list-style-type:none;float:left;}
div.bar{float:left;background:url(http://www.sinaimg.cn/dy/deco/2009/0903/survey/vote_cl_bar.png) no-repeat; width:152px; height:16px;padding:0 0 0 1px; margin:3px 0 0 0;}
div.bar .precent{float:left;overflow:hidden; }
div.bar .precent img{display:block; }
span.precent-num{font:normal normal normal 16px/1em "verdana","arial";}
</style>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
try{
    $(document).ready(function(){
        //初始进度条化动画
        $(".item .precent").each(function(){
        var pre;
        $(this).css("width","0px");
        if ($(this).attr("precent"))
        {
            pre = $(this).attr("precent");
        }
        else
        {
            pre = 0;
        }
        $(this).animate({width: pre},"slow");
    });
    });
}catch(e){}
</script>
<body>
<ul>
    <li class="item">
        <div class="bar">
            <div class="precent" style="width:0%" precent="62.0%">
                <img src="http://www.sinaimg.cn/dy/deco/2009/0903/survey/vote_cl_v2.png" width="149" height="13" alt="" />
            </div>
        </div>
            <span class="precent-num">62.0%</span>
        </div>
    </li>
    <li class="item">
        <div class="bar">
            <div class="precent" style="width:0%" precent="23.4%">
                <img src="http://www.sinaimg.cn/dy/deco/2009/0903/survey/vote_cl_v2.png" width="149" height="13" alt="" />
            </div>
        </div>
            <span class="precent-num">23.4%</span>
        </div>
    </li>
</ul>
</body>
</html>
这个可以么新浪投票的。
<div id="center">
<div id="message"></div>
<div id="loading"><div></div></div>
</div>
css代码：
代码如下:
#center{
margin:50px auto;
width:400px;
}
#loading{
width:397px;
height:49px;
background:url(bak.png) no-repeat;
}
#loading div{
width:0px;
height:48px;
background:url(pro.png) no-repeat;
color:#fff;
text-align:center;
font-family:Tahoma;
font-size:18px;
line-height:48px;
}
#message{
width:200px;
height:35px;
font-family:Tahoma;
font-size:12px;
background-color:#d8e7f0;
border:1px solid #187CBE;
display:none;
line-height:35px;
text-align:center;
margin-bottom:10px;
margin-left:50px; }<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
var progress_id = "loading";
function SetProgress(progress) {
if (progress) {
$("#" + progress_id + " > div").css("width", String(progress) + "%"); //控制#loading div宽度
$("#" + progress_id + " > div").html(String(progress) + "%"); //显示百分比
}
}
var i = 0;
function doProgress() {
if (i > 100) {
$("#message").html("加载完毕！").fadeIn("slow");//加载完毕提示
return;
}
if (i <= 100) {
setTimeout("doProgress()", 100);
SetProgress(i);
i++;
}
}
$(document).ready(function() {
doProgress();
});
</script>