> 웹 프론트엔드 > JS 튜토리얼 > jquery 마스크 제어 구현 code_jquery

jquery 마스크 제어 구현 code_jquery

WBOY
풀어 주다: 2016-05-16 18:14:10
원래의
1386명이 탐색했습니다.

스타일 코드:

코드 복사 코드는 다음과 같습니다.

#div_maskContainer
{
디스플레이: 없음;
}
/*마스크 스타일*/
#div_Mask{
z-index:1000;
filter:alpha(opacity=40); 위치: 절대;
상단:0px;
배경색: #D4D0C8;
/*표시 정보 스타일*/
#div_loading >너비:300px;높이: 60px;위치: 절대;
테두리: 1px 아웃셋 #B4E0F2;
패딩 상단: 40px;
배경 색상: #CCE9F9 ;
z-색인: 10000;
filter:alpha(opacity=100);!important
}



js 제어 코드:



코드 복사
코드는 다음과 같습니다. /**마스크 정보 제어사용법:
1. 마스크.css 참조
2. 마스크.js 참조
3. 호출 방법
var obj=new MaskControl(); //마스크 프롬프트 정보 표시
obj.show("표시된 프롬프트 정보");
//마스크 프롬프트 정보 숨기기
obj.hide()>//프롬프트 정보 표시 및 자동 종료 timeOut 이후(1000은 1초를 나타냄)
obj.autoDelayHide=function(html, timeOut)
*/
function MaskControl() {
this .show=function(html){
var loader=$("#div_maskContainer")
if(loader.length==0){
loader=$("< div id='div_maskContainer '>
");
$ ("body") .append(loader);
self.loader=loader;
var w=$(window).width()
var h=$(window). height();
var divMask=$("#div_Mask")
divMask.css("top",0).css("left",0).css("width",w). css("height" ,h);
vartipDiv=$("#div_loading")
if(html==undefine)
html=""; ;
로더 .show();
var x=(w-tipDiv.width())/2
var y=(h-tipDiv.height())/2; .css("왼쪽",x);
tipDiv.css("top",y);
},
this.hide=function(){
var loader=$("# div_maskContainer");
if(loader.length==0) return ;
loader.remove();
},
this.autoDelayHide=function(html,timeOut){
var loader=$(" #div_maskContainer");
if(loader.length==0) {
this.show(html)
}
else{
vartipDiv=$( "#div_loading") ;
tipDiv.html(html);
}
if(timeOut==undefine) timeOut=3000;
window.setTimeout(this.hide,timeOut); >}

}



관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿