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 相关文章推荐
javascript parseInt与Number函数的区别
Jan 21 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
vue使用nprogress实现进度条
Dec 09 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
超级简单的发送邮件程序
2006/10/09 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
<script defer> defer 是什么意思
2009/05/10 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
python处理csv数据的方法
2015/03/11 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
python装饰器实例大详解
2017/10/25 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
python正则-re的用法详解
2019/07/28 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
学校运动会开幕演讲稿
2014/01/04 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
《菜园里》教学反思
2014/04/17 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
docker 制作mysql镜像并自动安装
2022/05/20 Servers