jQuery 進度條效果程式碼

antzone發表於2017-03-15
jQuery

在實際應用中，進度條效果應用非常廣泛，因為可以能夠讓使用者能夠在視覺上有一個程式執行狀況的感知，非常的人性化，下面就是一個jQuery實現的簡單的進度條效果，希望能夠給需要的朋友帶來幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>     
<html>     
<head>     
<meta charset=" utf-8">     
<meta name="author" content="http://www.softwhy.com/" />     
<title>螞蟻部落</title>    
<style type="text/css">    
#outDiv{
position:relative;
border:1px solid #3c4d60;
-webkit-box-shadow:#666 0px 0px 3px;
-moz-box-shadow:#666 0px 0px 3px;
box-shadow:#666 0px 0px 3px;
width:200px;
height:40px;
}
#progressbar{
background-color:#DADAE4;
width:100%;
height:40px;
}
#progressWord{
position:absolute;
left:50%;
top:24%;
font-weight:bold;
}
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  var i=0;
  (function progressBar(){
    i=i+1;
    if(i>=101){
      i=0;
    }
    $("#proc").css("width",i+"%");
    $("#progressWord").text(i+"%");
    setTimeout(progressBar,100);
  })();
});
</script>  
</head>   
<body>   
<div id="outDiv">
  <div id="progressbar"><img id="proc" src="mytest/demo/processBar.png" width=0 height=40px /></div>
  <div id="progressWord">0%</div>
</div>
</body>   
</html>

以上程式碼實現了我們的要求實現了，實現了百分比動態進度條效果，下面介紹一下它的實現過程。

一.實現原理:

進度條的實現原理非常的簡單，下面分步介紹一下:

1.進度條漸進效果:

通過animate()函式設定圖片的寬度，並且通過定時器函式setTimeout()不斷遞迴呼叫，於是就實現了進圖條效果。

2.控制進度條的漸進百分比:

也就是當進度條載入完畢的時候，恰好顯示百分之百，就是以百分比的形式設定設定圖片的寬度，寬度百分比就是顯示的百分比數字，這樣就實現了此效果。

二.相關閱讀:

1.animate()函式可以參閱jQuery animate()一章節。

2.text()函式可以參閱jQuery text()一章節。

3.setTimeout()函式可以參閱window setTimeout()一章節。 

相關文章