JS 셰이딩 레이어 구현 code_javascript 기술

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 속성)
{
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,
//배경색
배경:'#333',
//투명도
불투명도: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)
{
위치 = '절대';
배경 = this.Background;
왼쪽 = '0px';
this.Resize(); .ZIndex;
필터 = 'Alpha(Opacity=' this.Opacity ')';//IE 역경
opacity = this.Opacity/100;//Non-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 ';
}
}


결론
벽돌 만들기에 오신 것을 환영합니다.