jquery+css 實(shí)現(xiàn)簡單的進(jìn)度條效果

jquery其實(shí)是有個(gè)進(jìn)度條插件的，叫做jqueryprogressbar.js，可是想練習(xí)一下，就沒有用，自己寫了點(diǎn)代碼。這個(gè)代碼其實(shí)是參考別人的，因?yàn)樽约旱腏S基礎(chǔ)不是很好。

其實(shí)我本來的計(jì)劃是做網(wǎng)頁設(shè)計(jì)師的，可是沒有人認(rèn)為我設(shè)計(jì)的好，哥到現(xiàn)在還沒有工作，發(fā)泄一下，不多說了。

效果圖

需要用到的圖片：

背景圖片：

進(jìn)度顯示圖片：

網(wǎng)頁結(jié)構(gòu)：

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

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈