jQuery載入進度條例項程式碼

admin發表於2017-10-31
jQuery

進度條效果大家應該不陌生，能夠小瀏覽者以動態直觀的方式瞭解相應的操作的執行進度，非常人性化的效果，下面就分享一段例項程式碼，以便需要的朋友擴充套件改造之用，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery模擬頁面載入進度條</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  font-size:12px
}
.loading{
  position:relative;
  top:0;
  left:0
}
.text input{
  float:left;
  color:#fff;
  height:32px;
  line-height:34px;
  padding:0 15px;
  background:#A70000;
  border:0
}
.jindu{
  float:left;
  margin-left:14px;
  color:#fff;
  width:150px;
  height:32px;
  line-height:32px;
  background:#000;
  position:relative
}
.jindu b{
  color:#A70000;
  font-size:0px;
  border-width:10px;
  border-color:transparent transparent transparent #A70000;
  border-style:dotted dotted dotted solid;
  position:absolute;
  left:-16px;
  top:5px
}
.jindu .jindu2{
  width:0px;
  height:32px;
  line-height:32px;
  background:#A70000;
  position:absolute
}
.jindu .text{
  width:150px;
  height:32px;
  line-height:32px;
  text-align:center;
  position:absolute
}
</style>
</head>
<body>
<div class="loading">
  <div class="text">
    <input type="button" value="正在初始化">
  </div>
  <div class="jindu"> <b></b>
    <div class="jindu2"></div>
    <div class="text">頁面總進度 <font>0</font>%</div>
  </div>
</div>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">
var loading=function(a,b){
  var c = b*1.5;
  if(b==100){
    $('.loading .jindu2').animate({width:c+'px'},500,function(){
      $('.loading input').val(a);
      $('.loading font').text(b);
      $('.loading').animate({top:'-32px'},1000,function(){
        alert('頁面載入完畢');
      });
    });
  }
  else{
     $('.loading .jindu2').animate({width:c+'px'},500,function(){
       $('.loading input').val(a);
       $('.loading font').text(b);
     });
  }
};
loading('正在載入jQuery UI',30);
loading('正在載入Chrome Frame',50);
loading('正在載入EXTJS',70);
loading('正在載入mootools',90);
loading('正在載入dojo',100);
</script>
</body>
</html>

以上程式碼實現動態載入進度條效果，程式碼比較簡單這裡就不多介紹了。

相關閱讀:

（1）.animate()參閱jQuery animate()方法一章節。

（2）.val()參閱jQuery val()方法一章節。

（3）.text()參閱jQuery text()方法一章節。

相關文章