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 Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
JavaScript分页组件使用方法详解
Jul 26 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调用Java对象的方法
2006/10/09 PHP
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php一个找二层目录的小东东
2012/08/02 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
Python采用raw_input读取输入值的方法
2014/08/18 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
贸易跟单员英文求职信
2014/04/19 职场文书