JS 遮照层实现代码

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.结束语欢迎拍砖，谢谢。

　　推荐阅读

　　JavaScript中apply与call的用法意义及区别说明

apply和call，它们的作用都是将函数绑定到另外一个对象上去运行，两者仅在定义参数的方式有所区别： Function.prototype.apply(thisArg,argArray); Function.prototype.call(thisArg[,arg1[,arg2…]]); 从函数原型>>>详细阅读

本文标题：JS 遮照层实现代码

地址：http://www.17bianji.com/kaifa2/JS/26724.html

1/2 1