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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
理解javascript中DOM事件
Dec 25 Javascript
vue实现全选、反选功能
Nov 17 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
javascript实现滚动条效果
Mar 24 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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函数解决SQL injection
2006/10/09 PHP
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
Php注入点构造代码
2008/06/14 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
Python ATM功能实现代码实例
2020/03/19 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
简单了解python列表和元组的区别
2020/05/14 Python
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
一套C++笔试题面试题
2012/06/06 面试题
美术专业学生个人自我评价
2013/09/19 职场文书
自荐信模版
2013/10/24 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
2014年内勤工作总结
2014/11/24 职场文书
检讨书模板大全
2015/05/07 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS