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实现轮显新闻标题链接
Aug 13 Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
vue.js实现备忘录demo
Jun 26 Javascript
js实现简单选项卡制作
Aug 05 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 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
openPNE常用方法分享
2011/11/29 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
PHP网络操作函数汇总
2015/05/18 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
Python之读取TXT文件的方法小结
2018/04/27 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
怎么快速自学python
2020/06/22 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
团工委书记自荐书范文
2013/12/17 职场文书
2014年信用社工作总结
2014/11/25 职场文书
消防隐患整改通知书
2015/04/22 职场文书
催款函范本大全
2015/06/24 职场文书
学校教代会开幕词
2016/03/04 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
Python经常使用的一些内置函数
2022/04/11 Python
Python实现数据的序列化操作详解
2022/07/07 Python