JSシェーディングレイヤー実装コード_JavaScriptスキル

1. まず、レンダリング:

2. 使用方法:
初期化: Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80
Show: Overlayer.Show(); または Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80}).Show();
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 (source の var プロパティ)
{
宛先[プロパティ] = ソース[プロパティ];
}
};
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,
//背景色
背景:'#333',
//透明度
不透明度:60,
//
オブジェクト:''
};
/*
初期化
*/
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';
}
this.Obj=obj ;
}
/*
スタイルを設定
*/
Overlayer.SetStyleCss=function()
{
with(this.Obj.style)
{
位置 = '絶対';
左 = '0px';
this.Resize(); .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); this.Obj)
{
this.Obj.style.display='block';
this.Resize();
}
}
/*
レイヤーを作成し、非表示レイヤー メソッドを使用します
*/
Overlayer.Close=function()
{
var overlay=this.Obj;
if(overlay)
{
overlay.style.display='none ';
}
}


4. 結論
レンガの作成へようこそ。