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


Posted in Javascript onAugust 23, 2016

本文实例讲述了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 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
input按钮的事件处理大全
Dec 10 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 #Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 #Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 #Javascript
js简单获取表单中单选按钮值的方法
Aug 23 #Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 #Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 #Javascript
JavaScript DOM节点操作方法总结
Aug 23 #Javascript
You might like
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
浅析vue深复制
2018/01/29 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
python获取网页状态码示例
2014/03/30 Python
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
python命令 -u参数用法解析
2019/10/24 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
Python 自由定制表格的实现示例
2020/03/20 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
人力资源管理系自荐信
2014/05/31 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
浅谈Python协程asyncio
2021/06/20 Python