DIV CSS 佈局教程網

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.結束語
歡迎拍磚，謝謝。