jquery+css 实现简单的进度条效果

jquery其实是有个进度条插件的，叫做jqueryprogressbar.js，可是想练习一下，就没有用，自己写了点代码。这个代码其实是参考别人的，因为自己的JS基础不是很好。

其实我本来的计划是做网页设计师的，可是没有人认为我设计的好，哥到现在还没有工作，发泄一下，不多说了。

效果图

需要用到的图片：

背景图片：

进度显示图片：

网页结构：

<div id="center">
<div id="message"></div>
<div id="loading"><div>
</div>

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

出处：http://www.cnblogs.com/gxll1314/

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠