JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果

2019-11-20 09:10:27

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：AngularJS使用ng-repeat指令实现下拉框

下一篇：JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】