sunshinegeorge的专栏

java学习者

网页进度条 代码

<script type="text/javascript">
window.onload=function(){
  var a = document.getElementById("loading");
  a.parentNode.removeChild(a);
}
document.write('<div id="loading" style="background:#CC4444;color:#FFF;width:80px;padding-left:5px;position:absolute;line-height:22px">正在读取...</div>');
</script>
<body style="margin:0px;padding:0px;font-size:12px;overflow-y:hidden">  
  <iframe src="http://www.sosuo8.com" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0"></iframe>
 
</body>

 

 

<html>
<head>
<style type="text/css">
/*Loader
----------------------------------------------*/
#loader_container {
  text-align:center;
  position:absolute;
  top:60%;
  width:100%;
  left: 0;
}
#loader {
  font-family:Tahoma, Helvetica, sans;
  font-size:11.5px;
  color: #abc;
  background-color:#000;
  padding:10px 0 16px 0;
  margin:0 auto; 
  display:block;
  width:130px;
  border:1px solid #abc;
  text-align:left; 
  z-index:2;
}
#loader_bg {background-color: #abc;
  position:relative;
  top:8px;
  left:8px;
  height:7px;
  width:113px;
  font-size:1px}
#progress {
  height:5px;
  font-size:1px;
  width:1px;
  position:relative;
  top:1px;
  left:0px;
  background-color: #fff;
}
 </style>
<script type="text/javascript">
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate()
{
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>79) pos += dir;
if (pos>79) len -= dir;
if (pos>79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
}
</script>
</head>
<body onLoad="remove_loading();">
<div id="loader_container" onclick="this.style.display='none'" title="点击关闭">
<div id="loader">
<div align="center">网页正在载入中 ...</div>
<div id="loader_bg"><div id="progress"> </div></div>
</div>
</div>
<img src="http://static.flickr.com/25/57001474_6d174fdce4_o_d.jpg" />
</body>
</html>

 

<style type="text/css">
 body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#222; left:0; top:0; width:100%; height:100%;zIndex:-2;}
</style>
<div id="imgsrc" style="visibility:hidden">
 <img src="http://www.webjx.com/upfiles/20050411/BS9097.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9092.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9084.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9064.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9050.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9070.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9079.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9068.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9039.jpg">
</div>
<script>
document.write('<span id=LB0 style="position:absolute;left:50%;top:50%;">');
document.write('<span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50;top:-18">Loading...</span>');
document.write('<span style="position:absolute;left:-50;top:-5;font-size:1px;width:100;height:10px;background:#333">');
document.write('<span id=LB1 style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;background:#FFFFFF"></span></span></span>');
m00=document.getElementById("imgsrc").getElementsByTagName("img");
m01=m00.length;
function images_loading_bar()
{
m02=0;
for(i=0;i<m01;i++)
m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100);
if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128);
else setTimeout("images_loading_bar()", 64);};
images_loading_bar();
</script>
 

阅读更多
想对作者说点什么? 我来说一句

jQuery网页步骤流程进度条代码

2016年08月15日 94KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭