JS遮照层实现代码_javascript技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS遮照层实现代码_javascript技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2539字，纯文字阅读大概需要4分钟。
内容图文
1.先上效果图：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.结束语
欢迎拍砖，谢谢。
内容总结
以上是互联网集市为您收集整理的JS遮照层实现代码_javascript技巧全部内容，希望文章能够帮你解决JS遮照层实现代码_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】