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 相关文章推荐
深入理解javascript的执行顺序
Apr 04 Javascript
绑定回车enter事件代码
May 18 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 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+Mysql分布式事务与解决方案
2020/12/03 PHP
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
Python的条件语句与运算符优先级详解
2015/10/13 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
Python气泡提示与标签的实现
2020/04/01 Python
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
销售经理工作职责
2014/02/03 职场文书
怎么写自荐书范文
2014/02/12 职场文书
地理教师岗位职责
2014/03/16 职场文书
大学毕业寄语大全
2014/04/10 职场文书
应届生求职信范文
2014/06/30 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
党建工作汇报材料
2014/12/24 职场文书