JS遮照层实现代码

1.先上效果图

2.使用方法：初始化：重叠层。初始化({ZIndex:100，Backgrund:#666，opa city 336080 })；显示：重叠层show()；或覆盖层。初始化({ZIndex:100，Backgrund:#666，Opacity:80 }).show()；关闭：重叠层close()；3.代码如下：公用函数：复制代码代码如下：函数GetDocumentObject(){ var obj；if(文档。compat mode==' back compat '){ obj=document。身体；} else { obj=document。文档元素}返回obj}函数getpage size(){ var obj=GetDocumentObject()；//alert(' page size : ' obj)；with(obj){ return { width : }((scrollwidgetclientwidth)？滚动宽度：客户端宽度)、高度：((滚动高度客户端高度)？scrolheight :客户端高度)} } } var Extend=函数(目标，源){ for(源中的定义变量属性){目标[属性]=源[属性]；} };var bindasevenlistener=fun(object，fun){ var args=array。原型。切片。调用(参数).切片(2);返回函数（事件){返回乐趣。应用(对象，[事件|| window.event].concat(args))；} } 遮照层代码：复制代码代码如下： /* 遮照层*/var Overlayer={ //遮照层身份证，这个是硬编码的id : ' _ _ DSKJOVERLAYER _ BY _ KEVIN '，//Z轴顺序ZIndex:0，//背景颜色Background:'#333 '，//透明度Opacity:60，//Obj : ' ' }；/* 初始化*/覆盖层。初始化=函数(o) { //创建超文本标记语言元素这个create()；//扩展属性赋值延长（此，o)；//设置样式这个SetStyleCss()；//附加事件AddListener(窗口，'调整大小'，BindAsEventListener(这个，这个。调整大小));AddListener(window，' scroll '，bindasevenlistener(this，function() { this ._ PageSize=GetPageSize()；如果（这个_PageSize.height！=这个_ height){ 0这个resize()；这个_高度=这个. PageSize . height } })；归还这个；} /* 创建超文本标记语言元素*/覆盖层create=function(){//alert(' create ')；var obj=$(这个身份证)；if(！obj){ obj=文档。创建元素(' div ')；obj.id=这个。身份证；物体。风格。显示='无'；文件。尸体。append child(obj)；}这个Obj=obj} /*设置样式*/覆盖层SetStyleCss=function(){ with(this .物体。样式){ position=' absolute背景=这个。背景；left=' 0pxtop=' 0px这个resize()；zIndex=这个ZIndex .滤镜='Alpha(不透明度='这个。不透明度')';//IE逆境不透明度=this.Opacity/100;//非IE } } /*窗口改变大小时重新设置宽度和高度*/覆盖层Resize=function() { if(this .obj){ var size=get page size()；这个物体。风格。宽度=尺寸。宽度' px '；这个物体。风格。高度=尺寸。高度“px”；} } /* 显示层*/覆盖层show=function(){//alert(' show ' Overlayer).ID)；如果（这个。{这个物体。风格。display=' block这个resize()；} } /* 关闭层，采用隐藏层的方法实现*/覆盖层close=function(){ var overlay=this .覆盖。风格。显示='无'；} } 4.结束语欢迎拍砖，谢谢。