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 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
npm 语义版本控制详解
Sep 10 Javascript
javascript函数式编程基础
Sep 15 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
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
PHP分页类集锦
2014/11/18 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
Python中django学习心得
2017/12/06 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
详解python调用cmd命令三种方法
2019/07/08 Python
Django如何实现上传图片功能
2019/08/16 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
企业内部培训方案
2014/02/04 职场文书
趣味比赛活动方案
2014/02/15 职场文书
元旦晚会主持词
2014/03/24 职场文书
党员干部承诺书范文
2014/03/25 职场文书
工作求职信
2014/07/04 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
新教师个人总结
2015/02/06 职场文书
企业培训简报范文
2015/07/20 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
使用refresh_token实现无感刷新页面
2022/04/26 Javascript
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL