流行的一款JS进度条封装类_浏览器特效

这是目前比较流行的一款JS进度条封装类，成组显示，多线程执行，每一个都有不同的进度，本进度条样式你可以自己美化一下，这时只是为了演示一种功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">       
<html xmlns="http://www.w3.org/1999/xhtml">       
<head>       
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" />       
<title>进度条</title>       
</head>
<body>       
<div id="ggg"></div>   
<div id="allBox" style=" width:500px; margin-top:5px; height:20px; border:#CDCDCD 1px solid;display:inline;overflow:hidden; float:left; position:relative; text-align:center">   
  <div style="height:16px; background-color:#e0f3fa; border:#ff6600 1px solid; position:absolute; top:1px; left:1px;z-index:1; width:400px"></div>       
  <strong style=" text-align:center;width:500px; POSITION: absolute; left:0; top:0;Z-INDEX: 2;">正在载入……</strong>       
</div>   
<div id="Div1" style=" width:200px; margin-top:5px; height:20px; border:#CDCDCD 1px solid;display:inline;overflow:hidden; float:left; position:relative; text-align:center">   
  <div style="height:16px; background-color:#e0f3fa; border:#ff6600 1px solid; position:absolute; top:1px; left:1px;z-index:1; width:100px"></div>       
  <strong style=" text-align:center;width:200px; POSITION: absolute; left:0; top:0;Z-INDEX: 2;">正在载入……</strong>       
</div>   
<script type="text/javascript">   
//进度条的封装类    
var loadingScroll = {    
    init : function(boxDiv,Speed){       
        this.boxId=boxDiv;//外层的id       
        this.scrollSpeed=Speed || 10;//速度 & 初始速度      
    },    
    doScroll : function() {       
    var scrollWi = 0;//执行时的宽度       
    var HimalayaN=document.getElementById(this.boxId).getElementsByTagName("div")[0] ;      
    var HimalayaW=document.getElementById(this.boxId);       
    var pointW=(HimalayaN.scrollWidth/HimalayaW.scrollWidth)*100;//原始的宽度比例       
    var doScr=window.setInterval(function() {       
         scrollWi += 1;       
         if (scrollWi >= pointW) {       
             window.clearInterval(doScr);       
         } else {       
             HimalayaN.style.width = scrollWi + "%";       
         }       
     }, this.scrollSpeed);       
    }       
}    
   
loadingScroll.init("allBox", 50);    
loadingScroll.doScroll();    
loadingScroll.init("Div1");    
loadingScroll.doScroll();    
</script>   
       
</body>       
</html>

所属频道：浏览器特效/更新时间：2013-04-24

[收藏][报错][返回列表]

流行的一款JS进度条封装类_浏览器特效

浏览器特效Rss订阅特效代码搜索

浏览器特效推荐

猜你也喜欢看这些