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 关键字屏蔽实现函数
Aug 02 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 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代码
2007/03/03 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
php自定义apk安装包实例
2014/10/20 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
Python数据存储之 h5py详解
2019/12/26 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
档案接收函范文
2014/01/10 职场文书
食品业务员岗位职责
2014/03/18 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
2014年英语工作总结
2014/12/20 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
js作用域及作用域链工作引擎
2022/07/07 Javascript