æè·¯ï¼è¿åº¦æ¡çæ»é¿åº¦ï¼è¿åº¦æ¡çå½åé¿åº¦ = æ°æ®æ»é¿åº¦ï¼æ°æ®å½åå è½½é¿åº¦ã
代ç ï¼
<style>
* {margin:0px; padding:0px}
.box {height:40px; width:500px; background:#ccc; border:1px solid #ccc; position:relative; margin:100px auto;}
.box #div1 {height:100%; width:0%; background:green; }
span {position:absolute; top:0; left:0; line-height:40px; width:100%; height:100%; text-align:center; font-size:28px; font-weight:bold; color:#fff;}
</style>
<script>
window.onload=function(){
var oDiv = document.getElementById('div1');
var oTxt = document.getElementById('txt');
var count = 0;
var total = 77;
for(var i=0;i<77;i++)
{
var oImg = new Image();
oImg.src= '
http://www.zhinengshe.com/works/3525/img/'+i+'.jpg'; oImg.onload=function(){
count++;
oDiv.style.width= Math.floor((count/total)*100) + '%';
oTxt.innerHTML = Math.floor((count/total)*100) + '%';
};
}
};
</script>
</head>
<body>
<div class="box">
<div id="div1"></div>
<span id="txt"></span>
</div>
</body>