本文實例講述了JS實現兼容火狐及IE iframe onload屬性的遮罩層隱藏及顯示效果。分享給大家供大家參考，具體如下：
<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title></title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><style type="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:0px solid #808080; background-color:#006699;}--></style></head><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()" ><div id="Layer3"><img src="lib/images/welcome33.gif" /></div><div id="Layer1"><iframe src="earth.jsp" id="Layer1"></iframe></div><div id="Layer2"><input class="input_image" type=image src="lib/images/website.jpg" id="website_earth" alt="點擊按鈕查詢站點分布地圖"/><br><br><input class="input_image" type=image src="lib/images/associator.jpg" id="select_ass" alt="點擊按鈕查詢用戶卡信息"/><br><br><input class="input_image" type=image src="lib/images/yichang.jpg" id="yichang" alt="點擊按鈕處理異?？ㄐ畔?/><br><br><input class="input_image" type=image src="lib/images/lvchang.jpg" id="gtbike" alt="點擊查看公司簡介"/></div></body></html><script>var secs=20;var wait=secs*100;//切換按下時的圖片function timing(){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);}function doUpdate(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"; }*/}//切換原始圖片function Timer(){document.getElementById("select_ass").disabled =false;document.getElementById("select_ass").src = "lib/images/associator.jpg";}var btMax =document.getElementById("Layer1");website_earth.onclick= function(){displayDiv();btMax.innerHTML ="<iframe src=earth.jsp id=Layer1 onLoad='removeDiv()'></iframe>";}select_ass.onclick= function(){displayDiv();timing();btMax.innerHTML ="<iframe src=Client?name=1 id=Layer1 onLoad='removeDiv()'></iframe>";//js創建iframe對象/*var NewFrame=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 ="<iframe src=Client?name=2 id=Layer1 onLoad='removeDiv()'></iframe>";}gtbike.onclick= function(){btMax.innerHTML ="<iframe src=lib/images/61111.jpg id=Layer1></iframe>";}//遮罩層顯示var mybg;displayDiv=function(){ mybg = document.createElement("div"); mybg.setAttribute("id","mybg"); mybg.innerHTML="<center>正在處理中, 請稍候<img src='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程序設計有所幫助。
新聞熱點
疑難解答
