标签：javascript视频教程,javascript教程下载,
js滚动的进度条的3种编程方式,
<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;">你的经验是1000，下级是2000</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;">你的经验是1000，下级是2000</strong>
</div>
<script type="text/javascript">
//进度条的封装类 http://www.knowsky.com/
function loadingScroll(boxDiv,Speed){
this.boxId=boxDiv;//外层的id
this.scrollSpeed=Speed;//速度
}
loadingScroll.prototype.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);
}
var ddddd = new loadingScroll("allBox", 10);
var aaaaa = new loadingScroll("Div1", 10);
ddddd.doScroll();
aaaaa.doScroll();
</script>
</body>
</html>
上一页 [1] [2]
，js滚动的进度条的3种编程方式
