JavaScript를 사용하여 모방 Windows 종료 effect_javascript 기술 달성

기본 원리 분석

Windows 종료 효과 분석
Windows 시스템을 사용하는 사용자가 시스템을 종료할 때 나타나는 인터페이스는 사용자가 종료, 로그아웃 또는 취소 작업을 선택할 수만 있고 데스크톱의 어떤 프로그램도 종료할 수 없습니다. 사용하고 화면이 회색으로 나타납니다.

이 예에서는 웹페이지에 대한 강조 효과를 모방합니다.

웹페이지에 이 종료 효과를 사용하면 어떤 이점이 있나요? 우선 특정 링크를 클릭하면 현재 사용자가 사용할 수 없는 작업은 백그라운드에 숨겨지고 사용 가능한 작업은 화면 상단에 강조 표시되어 사용자의 오작동을 방지할 수 있습니다. . 둘째, 정보를 강조 표시하면 사용자가 주의해야 할 사항을 상기시킬 수도 있습니다.
웹 페이지의 종료 효과 분석
이 효과를 웹 페이지에 구현하는 원리는 매우 간단합니다. 두 개의 레이어를 만듭니다. 하나는 전체 페이지를 덮고 회색으로 표시되며, 다른 레이어는 마스크 레이어 위에 강조 표시된 부분입니다. 이는 레이어의 z-index 속성을 설정하여 설정할 수 있습니다. 종료 효과를 취소한 후 페이지에서 이 두 레이어 요소를 삭제하면 됩니다.
다음 코드는 디스플레이 종료 효과를 구현합니다.

#lightbox {/*이 레이어는 강조 표시됩니다. 레이어*/
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid;
DISPLAY: block; Z-INDEX: 9999 /* 웹 페이지 상단을 충분히 크게 설정하세요*/
BACKGROUND: #fdfce9 /*배경 색상 설정*/ LEFT: 50%
MARGIN: -220px 0px 0px -250px; ;

테두리- 왼쪽: #fff 1px 솔리드;

테두리-하단: #fff 1px 솔리드;
위쪽: 50%; HEIGHT: 400px; TEXT-ALIGN: 왼쪽
}

#overlay {/*이 레이어는 오버레이입니다*/

DISPLAY: block
Z-INDEX: 9998; 아래 하이라이트 레이어* / 필터: 알파(OPACITY = 80);/*투명으로 설정*/ 왼쪽: 0px
너비: 위치: 절대
상단: 0px; 높이: 100%;
배경색: #000;
불투명도: 0.8; 불투명도: .80 🎜>













태그가 있으면 오버레이로 태그를 가릴 수 없지만 다른 브라우저에서는 가릴 수 있다는 점에 유의하세요.
IE 브라우저를 사용하는 경우 먼저 웹페이지에서
요소를 숨겨야 합니다. 예를 들어 다음 코드를 사용하여 페이지의 모든 요소를 숨길 수 있습니다.
selects = document.getElementsByTagName('select'); for(i = 0; i selects[i].style.visibility = visible;


코드 구현
클라이언트 코드
사용자가 링크를 클릭하면 클라이언트 페이지에 두 개의 링크가 전송됩니다. 그리고 하이라이트 레이어에 반환 정보를 표시합니다. 클라이언트 웹 페이지 파일 코드는 다음과 같습니다.

• AJAX LightBox
  


• 
  

<script></script><script></script> 하나 둘



또한 페이지에서 사용하는 CSS 스타일도 설정해야 합니다. lightbox.css 스타일 시트 파일 코드는 다음과 같습니다:
#lightbox {
BORDER-RIGHT: #fff 1px solid;
BORDER-TOP: #fff 1px solid; 🎜 > Z-INDEX:
배경: #fdfce9;
왼쪽:
여백: -220px 0px -250px
테두리-왼쪽: #fff 1px; > WIDTH: 500px;
BORDER-BOTTOM: #fff 1px solid;
위치: 절대;
TOP: 50%
HEIGHT: 400px; >UNKNOWN {
위치: 고정
}
#overlay {
디스플레이: 없음
Z-INDEX: 5000;
왼쪽: 0px ;
너비: 100%;
위치: 절대;
상단: 0px; 높이: 100% 불투명도: .80
}
알 수 없음
위치: 고정
}
.done#lightbox #lbLoadMessage {
DISPLAY: 없음
}
.done#lightbox # lbContent {
DISPLAY: 차단
}
.loading#lightbox #lbContent {
DISPLAY: 없음
}
.loading#lightbox #lbLoadMessage {
DISPLAY: 차단
}
.done#lightbox IMG {
WIDTH: 100%; HEIGHT: 100%
}
클라이언트 스크립트
브라우저마다 레이어 지원이 다르므로 먼저 클라이언트 브라우저 유형을 결정해야 합니다. 다음 코드를 사용하여 클라이언트의 브라우저와 운영 체제를 확인할 수 있습니다.
var 감지 = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;

함수 getBrowserInfo() {
       if (checkIt('konqueror')) {
            browser = "Konqueror";
            OS = "Linux";
       }
       else if (checkIt('safari')) browser = "Safari"
       else if (checkIt('omniWeb')) browser = "OmniWeb"
       else if(checkIt('opera) ')) 브라우저 = "Opera"
       else if (checkIt('Webtv')) 브라우저 = "WebTV";
       else if (checkIt('icab')) browser = "iCab"
       else if (checkIt('msie')) browser = "Internet Explorer"
       else if (!checkIt('호환') ) {
             브라우저 = "Netscape Navigator"
            버전 = Detect.charAt(8);
       }
       else brows = "알 수 없는 브라우저";

       if (!version) version = Detect.charAt(place   thestring.length);

       if(!OS) {
           if (checkIt('linux')) OS = "Linux";
            else if (checkIt('x11')) OS = "Unix";
            else if (checkIt('mac')) OS = "Mac"
            else if (checkIt('win')) OS = "Windows"
            else OS = "알 수 없는 운영 체제";
       }
}

function checkIt(string) {
        place = Detect.indexOf(string)   1;
        thestring = string;
        반품 장소;
}
아래쪽 화면을 아래로 내리세요.해당 웹페이지 로딩 및 초기화 메소드 코드는 다음과 같습니다.
//웹페이지 로딩은 초기화 및 getBrowserInfo 메소드를 호출합니다.
Event.observe(window, 'load', 초기화, false); observe(window, 'load', getBrowserInfo, false)
//로드되지 않은 경우 캐시 지우기
Event.observe(window, 'unload', Event.unloadCache, false)
//초기화 method
function 초기화( ; document.getElementsByClassName('lbOn');
for(i = 0; i valid = new lightbox(lbox[i]);
}
}

//Dom 메소드를 사용하여 오버레이 및 하이라이트 레이어 생성function addLightboxMarkup() {
bod = document.getElementsByTagName('body')[0]; 🎜> overlay = document.createElement('div');
overlay.id = 'overlay';
lb = document.createElement('div')
lb.id = 'lightbox'; 🎜> lb.className = '로드 중';
lb.innerHTML = '
'
                     '
'; 라이트박스 객체.이 클래스의 구체적인 코드 구현은 다음과 같습니다.
var lightbox = Class.create();

lightbox.prototype = {
yPos: 0,
xPos: 0,
// 생성 방법, CTRL은 객체의 요소
초기화: function (ctrl) {
// 요소의 링크를 this.content에 할당
this.Content = ctrl.href; 🎜>/// /이 요소에 대한 onclick 이벤트 활성화 메서드 추가
                                                                          using using using Ctrl
},

//링크를 클릭할 때
활성화: function(){
if (browser == 'Internet Explorer'){//IE 브라우저로 판단됨
This.getScroll()
this.prepareIE('100%', 'hidden')
this .setScroll(0,0); This.hideSelects('hidden');// 모든
태그 숨기기 > prepareIE: function( height, Overflow){
bod = document.getElementsByTagName('body')[0 ];
bod.style.height = 높이; bod.style.overflow = 오버플로

htm = document.getElementsByTagName('html')[0]; .height = height;
htm.style.overflow =
}, hideSelects: 함수(가시성){
selects = document.getElementsByTagName('select'); ; i selects[i].style.vis ibility = 가시성;
                                                          = self.pageYOffset;
      } else if (document .documentElement && document.documentElement.scrollTop) {
this.yPos = document.documentElement.scrollTop
}else if (document.body) {
this.yPos = document.body.scrollTop;
}
},

setScroll: function(x, y){ 🎜> window. (x, y);
},

디스플레이라이트박스: 기능(디스플레이){

                                                 

//Ajax 요청을 보내는 메소드
loadInfo: function() {
//요청이 완료되면 이 메소드가 호출됩니다.
클래스의 processInfo 메소드       > var result = response. responseText;
//레이어를 강조표시하도록 표시
info = "
" result "
“; 라이트박스').className = "완료";
                                                                
 Event.observe(ctrl, '클릭', this.reset.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
                                                             > ~                            ,
// 라이트박스 내 새 링크를 검색하고, 클릭 이벤트
actions: function(){
lbActions = document.getElementsByClassName('lbAction');
for(i = 0; i                  이벤트를 첨부합니다. 관찰(lbActions[i], '클릭', this[lbActions[i].rel].bindAs EventListener(this), false)
                lbActions[i ].onclick = function(){return false;}; 🎜>                                                                                                         


서버 측 코드

서버 측에서는 먼저 쿼리에서 "id" 값을 가져오고, 해당 값이 null이거나 비어 있으면 기본값으로 설정됩니다. . 그런 다음 값을 판단하고 해당 문자열 정보를 반환합니다.요청을 처리하기 위한 getInfojsp 페이지 코드는 다음과 같습니다.

//요청에서 id 값 가져오기
String imgID = request.getParameter("id" );
if ( imgID==null||imgID.equals(""))//null이거나 비어 있는 경우
imgID="one";//기본값으로 설정
if ( imgID.equals("one" ))//1개인 경우
{
%>

Porsche Carrera GT

Carrera GT에는 5.7리터 V10이 있습니다.
605 SAE 마력(451 kW)을 생산하는 내연 기관입니다. Porsche는 3.9초 만에 0에서 100
km/h(62mph)까지 가속하고 최대 속도는 330km/h(204km)라고 주장합니다.
605마력, 차량 무게는 1,380kg(3,042LB)입니다.
내
Ferrari Enz o와 달리 6단 수동 변속기만 제공됩니다. 이는 순차 수동 변속기로만 제공됩니다. 또한
Carrera GT는 Ferrari Enzo보다 훨씬 저렴합니다.
Ferrari Enzo의 가격은 Carrera GT의 $440,000에 비해 약 $660,000입니다.
최고의 슈퍼카 중 하나인
%>
Ferrari Testarossa

페라리 테스타로사는 페라리가 만든 V12 미드엔진 스포츠카입니다.
"빨간 머리"를 의미하는 이름은 플랫 12 엔진에 빨간색으로 칠해진 실린더 헤드에서 유래되었습니다.

평면 크랭크축 핀을 반대편 실린더와 공유했기 때문에 기술적으로 180?V 엔진이었습니다. 출력은 390hp(291
kW)였으며 이 자동차는 많은 비교 테스트와 찬사를 받았습니다.
에 소개되었습니다. 불과 5년 만에 Road & Track 매거진의 표지를 9번이나 장식했습니다. 테스타로사, 512TR, 512M이 거의 10,000대 생산되어 높은 가격과 이국적인 디자인에도 불구하고
가장 흔한 페라리 모델 중 하나가 되었습니다.