JS 遮照层实现代码_javascript技巧-js教程-PHP中文网

JS 遮照层实现代码_javascript技巧

php中文网

发布： 2016-05-16 18:30:55

原创

1265人浏览过

1.先上效果图：

2.使用方法：
初始化：Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80});
显示：Overlayer.Show();或Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80}).Show();
关闭：Overlayer.Close();
3.代码如下：
公用函数：

Get笔记

Get笔记，一款AI驱动的知识管理产品

774

查看详情

复制代码代码如下:

 
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'; 
} 
} 