流行的一款JS进度条封装类

本栏首页分类：菜单导航层和布局背景特效 CSS相关文本链接表格相关日期时间图片特效页面综合广告代码表单及按钮计算转换游戏娱乐其它

流行的一款JS进度条封装类

标签：进度条　时间：2009-03-16　已阅读：
这是目前比较流行的一款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" content="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>

流行的一款JS进度条封装类

本类推荐代码

本类阅读排行

最新源码下载