简单的jquery进度条
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的jquery进度条</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script>
var i=0;
/*add——创建tbx下的div加文字和变宽度的方法*/
function add(i){
var tbox =$(".tbox");
var tiao =$(".tiao");
tiao.css("width",i+"%").html(i+"%");
}
/*创建方法（i++循环起来）*/
function xh(){
if(i>100){
$(".ok").html("加载完成").fadeIn("slow");
return;
}
if(i<=100){
setTimeout("xh()",100)
add(i);
i++;
}
}
/*调用xh()函数*/
$(document).ready(function(){
xh();
});
</script>
<style>
.box{width:397px; height:300px; margin:30px auto; }
.ok{width:200px; height:100px; margin:0 auto; text-align:center; background:#999; line-height:100px; color:#FFF; display:none; }
.tbox{width:397px; height:49px; background:url(bak.png) no-repeat; margin-top:20px;}
.tbox div{width:0px; height:49px; background:url(pro.png) no-repeat; text-align:center;
font-family:Tahoma; font-size:18px; line-height:48px;}
</style>
<div class="box">
<div class="ok"></div>
<div class="tbox">
<div class="tiao"></div>
</div>
</div>
</body>
</html>
