分享

js动态加载页面iframe遮罩效果

 yanjj 2011-11-30


附上源代码: index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> --执子手,偕子老  </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
#loader_container {
text-align:center;
position:absolute;
top:40%;
width:100%;
left: 0;
}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:11.5px;
color:#000000;
background-color:#FFffff;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:230px;
border:1px solid #5a667b;
text-align:left;
z-index:2;
}
#loader_bg {background-color:#e4e7eb;
position:relative;
top:8px;
left:8px;
height:7px;
width:213px;
font-size:1px;
}
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:0px;
background-color:#77A9E0;
}
</style>
<script language="JavaScript" type="text/javascript">
document.write('<div id="loader_container"><div id="loader"><div align="center">页面组件加载中……<br />首次加载可能会花费一分钟,请稍候...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>');
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>179) pos += dir;
if (pos>179) len -= dir;
if (pos>179 && 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()" style="margin:0 0;padding:0 0" scroll="no">
<iframe id="iframe3" height="100%"  width="100%" scrolling="no" frameborder="0" src="index.html"></iframe>
</BODY>
</HTML>


    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多