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/

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!