DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery 簡單的進度條實現代碼
jquery 簡單的進度條實現代碼
編輯:JQuery特效代碼     

其實我本來的計劃是做網頁設計師的,可是沒有人認為我設計的好,哥到現在還沒有工作,發洩一下,不多說了。

效果圖

需要用到的圖片:

背景圖片:

進度顯示圖片:

網頁結構:
代碼如下:
<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;

JavaScript代碼:
代碼
代碼如下:
<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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved