JS實(shí)現(xiàn)兼容火狐及IE iframe onload屬性的遮罩層隱藏及顯示效果
本文實(shí)例講述了JS實(shí)現(xiàn)兼容火狐及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="點(diǎn)擊按鈕查詢站點(diǎn)分布地圖"/> <br><br> <input class="input_image" type=image src="lib/images/associator.jpg" id="select_ass" alt="點(diǎn)擊按鈕查詢用戶卡信息"/> <br><br> <input class="input_image" type=image src="lib/images/yichang.jpg" id="yichang" alt="點(diǎn)擊按鈕處理異常卡信息"/> <br><br> <input class="input_image" type=image src="lib/images/lvchang.jpg" id="gtbike" alt="點(diǎn)擊查看公司簡介"/> </div> </body> </html> <script> var secs=20; var wait=secs*100; //切換按下時(shí)的圖片 function timing(){ document.getElementById("select_ass").disabled =true; document.getElementById("select_ass").src = "lib/images/123123.jpg"; //定時(shí)切換圖片 /*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創(chuàng)建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>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
基于JavaScript實(shí)現(xiàn)簡易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)簡易計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06javascript 動態(tài)數(shù)據(jù)下的錨點(diǎn)錯(cuò)位問題解決方法
用 Javascript 實(shí)現(xiàn)錨點(diǎn)(Anchor)間平滑跳轉(zhuǎn)2008-12-12JS利用正則表達(dá)式實(shí)現(xiàn)簡單的密碼強(qiáng)弱判斷實(shí)例
這篇文章主要給大家介紹了關(guān)于JS利用正則表達(dá)式實(shí)現(xiàn)簡單的密碼強(qiáng)弱判斷的相關(guān)資料,實(shí)現(xiàn)后的效果非常簡單,但也挺實(shí)用的,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),需要的朋友們下面來一起看看吧。2017-06-06TypeScript裝飾器與反射元數(shù)據(jù)實(shí)例詳解
TypeScript的裝飾器為我們提供了一種強(qiáng)大的工具,可以在運(yùn)行時(shí)改變類的行為,通過理解裝飾器的工作原理,我們可以創(chuàng)造更加強(qiáng)大、靈活且易于維護(hù)的應(yīng)用,這篇文章主要介紹了TypeScript裝飾器與反射元數(shù)據(jù),需要的朋友可以參考下2023-09-09深入理解JavaScript系列(26):設(shè)計(jì)模式之構(gòu)造函數(shù)模式詳解
這篇文章主要介紹了深入理解JavaScript系列(26):設(shè)計(jì)模式之構(gòu)造函數(shù)模式詳解,本文講解了基本用法、構(gòu)造函數(shù)與原型、只能用new嗎?、強(qiáng)制使用new、原始包裝函數(shù)等內(nèi)容,需要的朋友可以參考下2015-03-03js使用Canvas將多張圖片合并成一張的實(shí)現(xiàn)代碼
這篇文章主要介紹了js使用Canvas將多張圖片合并成一張的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-04-04flash javascript之間的通訊方法小結(jié)
不用getURL和fsCommand方法個(gè)國外的通信方法,值得一看2008-12-12