網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>瀏覽器特效代碼>

流行的一款JS進(jìn)度條封裝類_瀏覽器特效

這是目前比較流行的一款JS進(jìn)度條封裝類，成組顯示，多線程執(zhí)行，每一個(gè)都有不同的進(jìn)度，本進(jìn)度條樣式你可以自己美化一下，這時(shí)只是為了演示一種功能。

<!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>進(jìn)度條</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">   
//進(jìn)度條的封裝類    
var loadingScroll = {    
    init : function(boxDiv,Speed){       
        this.boxId=boxDiv;//外層的id       
        this.scrollSpeed=Speed || 10;//速度 & 初始速度      
    },    
    doScroll : function() {       
    var scrollWi = 0;//執(zhí)行時(shí)的寬度       
    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>

所屬頻道：瀏覽器特效/更新時(shí)間：2013-04-24

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)瀏覽器特效：

流行的一款JS進(jìn)度條封裝類_瀏覽器特效

瀏覽器特效Rss訂閱特效代碼搜索

瀏覽器特效推薦

猜你也喜歡看這些