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 相关文章推荐
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
Javascript进制转换实例分析
May 14 Javascript
json传值以及ajax接收详解
May 24 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
简单了解vue 插值表达式Mustache
Jul 22 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 清除网页病毒的方法
2008/12/05 PHP
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
浅析php工厂模式
2014/11/25 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
vue之延时刷新实例
2019/11/14 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
在python中安装basemap的教程
2018/09/20 Python
Python装饰器用法实例分析
2019/01/14 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
python3 求约数的实例
2019/12/05 Python
tensorflow常用函数API介绍
2020/04/19 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
python中PyQuery库用法分享
2021/01/15 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
大专学生推荐信范文
2013/11/19 职场文书
网络信息安全承诺书
2014/03/26 职场文书
新闻编辑求职信
2014/07/13 职场文书
工作失误检讨书
2015/01/26 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
检察院起诉书
2015/05/20 职场文书
Redis高并发缓存架构性能优化
2022/05/15 Redis