JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
本文实例讲述了JS实现兼容火狐及IEiframeonload属性的遮罩层隐藏及显示效果。分享给大家供大家参考，具体如下：
<%@pagelanguage="java"import="java.util.*"pageEncoding="GB2312"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"
+request.getServerName()+":"+request.getServerPort()
+path+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title></title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<!--
<linkrel="stylesheet"type="text/css"href="styles.css">
-->
<styletype="text/css">
<!--
#Layer1{
position:absolute;
width:896px;
height:472px;
z-index:1;
left:97px;
top:120px;
}
#Layer2{
position:absolute;
width:127px;
height:86px;
z-index:2;
left:1159px;
top:240px;
}
#Layer3{
position:absolute;
width:200px;
height:115px;
z-index:3;
left:404px;
top:160px;
}
body{
background-image:url(lib/images/index111.jpg);
margin-left:-10px;
}
.input_image{border:0pxsolid#808080;background-color:#006699;}
-->
</style>
</head>
<bodyleftmargin="0"topmargin="0"marginwidth="0"marginheight="0"oncontextmenu="returnfalse"ondragstart="returnfalse"onselectstart="returnfalse"onselect="document.selection.empty()"oncopy="document.selection.empty()"onbeforecopy="returnfalse"onmouseup="document.selection.empty()">
<divid="Layer3">
<imgsrc="lib/images/welcome33.gif"/>
</div>
<divid="Layer1">
<iframesrc="earth.jsp"id="Layer1"></iframe>
</div>
<divid="Layer2">
<inputclass="input_image"type=imagesrc="lib/images/website.jpg"id="website_earth"alt="点击按钮查询站点分布地图"/>
<br><br>
<inputclass="input_image"type=imagesrc="lib/images/associator.jpg"id="select_ass"alt="点击按钮查询用户卡信息"/>
<br><br>
<inputclass="input_image"type=imagesrc="lib/images/yichang.jpg"id="yichang"alt="点击按钮处理异常卡信息"/>
<br><br>
<inputclass="input_image"type=imagesrc="lib/images/lvchang.jpg"id="gtbike"alt="点击查看公司简介"/>
</div>
</body>
</html>
<script>
varsecs=20;
varwait=secs*100;
//切换按下时的图片
functiontiming(){
document.getElementById("select_ass").disabled=true;
document.getElementById("select_ass").src="lib/images/123123.jpg";
//定时切换图片
/*for(i=1;i<=(wait/100);i++){
window.setTimeout("doUpdate("+i+")",i*100);
}
window.setTimeout("Timer()",wait);
}
functiondoUpdate(num){
if(num==(wait/100)){
document.getElementById("select_ass").src="lib/images/associator.jpg";
}else{
wut=(wait/100)-num;
document.getElementById("select_ass").src="lib/images/123123.jpg";
}*/
}
//切换原始图片
functionTimer(){
document.getElementById("select_ass").disabled=false;
document.getElementById("select_ass").src="lib/images/associator.jpg";
}
varbtMax=document.getElementById("Layer1");
website_earth.onclick=function(){
displayDiv();
btMax.innerHTML="<iframesrc=earth.jspid=Layer1onLoad='removeDiv()'></iframe>";
}
select_ass.onclick=function(){
displayDiv();
timing();
btMax.innerHTML="<iframesrc=Client?name=1id=Layer1onLoad='removeDiv()'></iframe>";
//js创建iframe对象
/*varNewFrame=window.parent.document.createElement("iframe");
NewFrame.id="Layer1";
NewFrame.setAttribute("frameBorder","0");
NewFrame.setAttribute("scrolling","no");
NewFrame.setAttribute("onLoad","removeDiv()");
NewFrame.setAttribute("src","Client?name=1");
btMax.appendChild(NewFrame);*/
}
yichang.onclick=function(){
displayDiv();
btMax.innerHTML="<iframesrc=Client?name=2id=Layer1onLoad='removeDiv()'></iframe>";
}
gtbike.onclick=function(){
btMax.innerHTML="<iframesrc=lib/images/61111.jpgid=Layer1></iframe>";
}
//遮罩层显示
varmybg;
displayDiv=function()
{
mybg=document.createElement("div");
mybg.setAttribute("id","mybg");
mybg.innerHTML="<center>正在处理中,请稍候<imgsrc='lib/images/loading.gif'></img></center>";
mybg.style.width="100%";
mybg.style.position="absolute";//绝对位置显示
mybg.style.top="260";
mybg.style.left="0";
mybg.style.zIndex="100";//z轴位置
mybg.style.opacity="0.8";//透明度
mybg.style.filter="Alpha(opacity=80)";//滤镜显示透明度
document.body.appendChild(mybg);
}
//遮罩层移除
removeDiv=function()
{
document.body.removeChild(mybg);
Timer();
}
</script>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。