Posted in Javascript onMarch 31, 2010
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 遮照层实现代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@