JS 遮照层实现代码


Posted in Javascript onMarch 31, 2010

1.先上效果图:
JS 遮照层实现代码
2.使用方法:
初始化:Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80});
显示:Overlayer.Show();或Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80}).Show();
关闭:Overlayer.Close();
3.代码如下:
公用函数:

function GetDocumentObject() 
{ 
var obj; 
if(document.compatMode=='BackCompat') 
{ 
obj=document.body; 
} 
else 
{ 
obj=document.documentElement 
} 
return obj; 
} 
function GetPageSize() 
{ 
var obj = GetDocumentObject(); 
//alert('pagesize:'+obj); 
with(obj) 
{ 
return {width:((scrollWidth>clientWidth)?scrollWidth:clientWidth),height:( (scrollHeight>clientHeight)?scrollHeight:clientHeight)} 
} 
} 
var Extend = function(destination, source) 
{ 
for (var property in source) 
{ 
destination[property] = source[property]; 
} 
}; 
var BindAsEventListener = function(object, fun) 
{ 
var args = Array.prototype.slice.call(arguments).slice(2); 
return function(event) 
{ 
return fun.apply(object, [event || window.event].concat(args)); 
} 
}

遮照层代码:
/* 
遮照层 
*/ 
var Overlayer= 
{ 
//遮照层ID,这个是硬编码的 
ID:'__DSKJOVERLAYER_BY_KEVIN', 
//Z轴顺序 
ZIndex:0, 
//背景颜色 
Background:'#333', 
//透明度 
Opacity:60, 
// 
Obj:'' 
}; 
/* 
初始化 
*/ 
Overlayer.Initialize=function(o) 
{ 
//创建Html元素 
this.Create(); 
//扩展属性赋值 
Extend(this,o); 
//设置样式 
this.SetStyleCss(); 
//附加事件 
AddListener(window,'resize',BindAsEventListener(this,this.Resize)); 
AddListener(window,'scroll',BindAsEventListener(this,function() 
{ 
this._PageSize=GetPageSize(); 
if(this._PageSize.height!=this._height) 
{ 
this.Resize(); 
this._height=this._PageSize.height; 
} 
})); 
return this; 
} 
/* 
创建HTML元素 
*/ 
Overlayer.Create=function() 
{ 
//alert('create'); 
var obj=$(this.ID); 
if(!obj) 
{ 
obj = document.createElement('div'); 
obj.id=this.ID; 
obj.style.display='none'; 
document.body.appendChild(obj); 
} 
this.Obj=obj; 
} 
/* 
设置样式 
*/ 
Overlayer.SetStyleCss=function() 
{ 
with(this.Obj.style) 
{ 
position = 'absolute'; 
background = this.Background; 
left = '0px'; 
top = '0px'; 
this.Resize(); 
zIndex = this.ZIndex; 
filter = 'Alpha(Opacity='+this.Opacity+')';//IE逆境 
opacity = this.Opacity/100;//非IE 
} 
} 
/* 
窗口改变大小时重新设置宽度和高度 
*/ 
Overlayer.Resize=function() 
{ 
if(this.Obj) 
{ 
var size=GetPageSize(); 
this.Obj.style.width=size.width+'px'; 
this.Obj.style.height=size.height+'px'; 
} 
} 
/* 
显示层 
*/ 
Overlayer.Show=function() 
{ 
//alert('show'+Overlayer.ID); 
if(this.Obj) 
{ 
this.Obj.style.display='block'; 
this.Resize(); 
} 
} 
/* 
关闭层,采用隐藏层的方法实现 
*/ 
Overlayer.Close=function() 
{ 
var overlay=this.Obj; 
if(overlay) 
{ 
overlay.style.display='none'; 
} 
}

4.结束语
欢迎拍砖,谢谢。
Javascript 相关文章推荐
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 #Javascript
jQuery 遍历json数组的实现代码
Sep 22 #Javascript
Javascript load Page,load css,load js实现代码
Mar 31 #Javascript
Javascript Jquery 遍历Json的实现代码
Mar 31 #Javascript
jquery+json实现的搜索加分页效果
Mar 31 #Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 #Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 #Javascript
You might like
PHP+javascript液晶时钟
2006/10/09 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
Firefox div高度自适应
2009/04/28 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
了解重排与重绘
2019/05/29 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
家具公司总经理岗位职责
2014/07/08 职场文书
高中学生自我评价范文
2014/09/23 职场文书
期中考试复习计划
2015/01/19 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
初中地理教学反思
2016/02/19 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
Go语言空白表示符_的实例用法
2021/07/04 Golang
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js