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优化效率 提升性能解决方案
Sep 06 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
node.js中 stream使用教程
Aug 28 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
JS实现页面打印功能
Mar 16 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
uni-app使用微信小程序云函数的步骤示例
May 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
可以在线执行PHP代码包装修正版
2008/03/15 PHP
php 购物车完整实现代码
2014/06/05 PHP
php计算一个文件大小的方法
2015/03/30 PHP
php三元运算符知识汇总
2015/07/02 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
php的常量和变量实例详解
2017/06/27 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
判断网页编码的方法python版
2016/08/12 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
python开头的coding设置方法
2019/08/08 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
10个示例带你掌握python中的元组
2020/11/23 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
昆虫记读书笔记
2015/06/26 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python