用JavaScript實現仿Windows關機效果

　　基本原理分析

　　Windows關機效果分析
使用Windows系統的用戶在關機的時候出現的界面只允許用戶選擇關機注銷或取消動作而桌面上的程序都不能使用並且屏幕呈現灰色狀態

　　本例將仿照這種高亮顯示的效果在網頁上實現

　　在網頁上運用這種關機效果有什麼好處呢？首先由於單擊某一鏈接後將用戶此時不可用的操作隱藏在後台將可用的操作放在屏幕最上層並高亮顯示可以避免用戶的誤操作其次將信息高亮顯示也可以提醒用戶應該注意的事項
網頁中實現關機效果分析
在網頁中實現這種效果的原理很簡單創建兩個圖層一個為遮蓋層覆蓋整個頁面並且顯示為灰色另一個圖層作為高亮顯示的部分在遮蓋層的上方這可通過設置圖層的zindex屬性來設置當取消關機效果後只需將這兩個圖層元素在頁面中刪除即可
以下代碼實現顯示關機效果

<html>
<head>
<title>html class=wordstyle>asp?typeid= snap_preview_added=no>Ajax LightBox Sample</title>
<style type=text/html class=wordstyle>asp?typeid= snap_preview_added=no>CSS>
#lightbox {/*該層為高亮顯示層*/
       BORDERRIGHT: #fff px solid;
       BORDERTOP: #fff px solid;
       DISPLAY: block;
       ZINDEX: ; /*設置該層在網頁的最上端設置足夠大*/
       BACKGROUND: #fdfce; /*設置背景色*/
       LEFT: %;
       MARGIN: px px px px;
       BORDERLEFT: #fff px solid;
       WIDTH: px;
       BORDERBOTTOM: #fff px solid;
       POSITION: absolute;
       TOP: %;
       HEIGHT: px;
       TEXTALIGN: left
}
#overlay {/*該層為覆蓋層*/
      DISPLAY: block;
      ZINDEX: ; /*設置高亮層的下方*/
      FILTER: alpha(opacity=); /*設置成透明*/
      LEFT: px;
      WIDTH: %;
      POSITION: absolute;
      TOP: px;
      HEIGHT: %;
      BACKGROUNDCOLOR: #;
      mozopacity: ;
      opacity:
}
</style>
</head>
<body>
<!該層為覆蓋層 >
<div id=overlay></div>
<!該層為高亮顯示層 >
<div id=lightbox></div>
</body>
</html>
需要注意的是在IE浏覽器中如果有<select>標記則該標記不能被覆蓋層覆蓋但在其他浏覽器中則可以覆蓋

　　在使用IE浏覽器時要先將網頁中的<select>元素隱藏起來如以下代碼可以用於隱藏頁面所有的<select>元素
selects = documentgetElementsByTagName(select);

for(i = ; i < selectslength; i++) {
selects[i]stylevisibility = visibility;
}

　　代碼實現
客戶端代碼
客戶端的頁面上有兩個鏈接用戶單擊鏈接後向服務器端發送請求並將返回信息顯示到高亮層上客戶端的網頁文件代碼如下所示

<html>
<head>
<title>AJAX LightBox</title>
<! 本例使用的css樣式表文件>
<LINK  type=text/css rel=stylesheet>
<!prototype類文件>
<script type=text/html class=wordstyle>asp?typeid= snap_preview_added=no>html class=wordstyle>javascript src=js/prototypejs ></script>
<!本例使用的html class=wordstyle>javascript代碼>
<script type=text/html class=wordstyle>javascript src=lightboxjs ></script>
</head>
<body>
<DIV id=container>
<UL>
  <LI><A class=lbOn  class=wordstyle>jsp?id=one>One</A>
  </LI>
  <LI><A class=lbOn  class=wordstyle>jsp?id=two>Two</A>
  </LI>
</UL>
</div>
</body>
</html>

　　另外還需要設置該頁面所使用CSS樣式lightboxcss樣式表文件代碼如下所示

#lightbox {
      BORDERRIGHT: #fff px solid;
      BORDERTOP: #fff px solid;
       DISPLAY: none;
       ZINDEX: ;
       BACKGROUND: #fdfce;
       LEFT: %;
       MARGIN: px px px px;
       BORDERLEFT: #fff px solid;
       WIDTH: px;
       BORDERBOTTOM: #fff px solid;
       POSITION: absolute;
       TOP: %;
       HEIGHT: px;
       TEXTALIGN: left
}
UNKNOWN {
     POSITION: fixed
}
#overlay {
      DISPLAY: none;
      ZINDEX: ; FILTER: alpha(opacity=);
      LEFT: px;
      WIDTH: %;
      POSITION: absolute;
      TOP: px;
      HEIGHT: %;
      BACKGROUNDCOLOR: #; mozopacity: ; opacity:
}
UNKNOWN {
    POSITION: fixed
}
done#lightbox #lbLoadMessage {
      DISPLAY: none
}
done#lightbox #lbContent {
      DISPLAY: block
}
loading#lightbox #lbContent {
      DISPLAY: none
}
loading#lightbox #lbLoadMessage {
       DISPLAY: block
}
done#lightbox IMG {
      WIDTH: %; HEIGHT: %
}

　　客戶端腳本
由於浏覽器對圖層的支持不同所以首先要確定客戶端浏覽器的類型以下代碼可用於判斷客戶端的浏覽器和html class=wordstyle>asp

snap_preview_added=no>操作系統
var detect = navigatoruserAgenttoLowerCase();
var OSbrowserversiontotalthestring;
function getBrowserInfo() {
       if (checkIt(konqueror)) {
            browser = Konqueror;
            OS = html class=wordstyle>asp?typeid= snap_preview_added=no>Linux;
       }
       else if (checkIt(safari)) browser = Safari
       else if (checkIt(omniWeb)) browser = OmniWeb
       else if (checkIt(opera)) browser = Opera
       else if (checkIt(Webtv)) browser = WebTV;
       else if (checkIt(icab)) browser = iCab
       else if (checkIt(msie)) browser = Internet Explorer
       else if (!checkIt(compatible)) {
             browser = Netscape Navigator
            version = detectcharAt();
       }
       else browser = An unknown browser;
       if (!version) version = detectcharAt(place + thestringlength);
       if(!OS) {
            if (checkIt(linux)) OS = Linux;
            else if (checkIt(x)) OS = Unix;
            else if (checkIt(mac)) OS = Mac
            else if (checkIt(win)) OS = Windows
            else OS = an unknown operating system;
       }
}
function checkIt(string) {
        place = detectindexOf(string) + ;
        thestring = string;
        return place;
}
下面看一下網頁加載時需要添加的方法有關網頁加載和初始化方法代碼如下
//網頁加載調用initialize和getBrowserInfo方法
Eventobserve(window load initialize false);
Eventobserve(window load getBrowserInfo false);
//未加載時清空緩存
Eventobserve(window unload EventunloadCache false);
//初始化方法
function initialize(){
        //調用該方法為該頁添加覆蓋層和高亮顯示層
        addLightboxMarkup();
        //為每個可高亮顯示的元素創建lightbox對象
        lbox = documentgetElementsByClassName(lbOn);
        for(i = ; i < lboxlength; i++) {
                    valid = new lightbox(lbox[i]);
        }
}
// 使用Dom方法創建覆蓋層和高亮層
function addLightboxMarkup() {
        bod = documentgetElementsByTagName(body)[];
        overlay = documentcreateElement(div);
        overlayid = overlay;
        lb = documentcreateElement(div);
        lbid = lightbox;
        lbclassName = loading;
        lbinnerHTML = <div id=lbLoadMessage> +
                                           <p>Loading</p> +
                                           </div>;
        bodappendChild(overlay);
        bodappendChild(lb);
}
封裝lightbox類
初始化數據時為每個可高亮顯示的鏈接創建了lightbox對象該類的代碼具體實現如下
var lightbox = Classcreate();
lightboxprototype = {
       yPos :
       xPos :
      //構造方法ctrl為創建該對象的元素
       initialize: function(ctrl) {
              //將該元素的鏈接賦值給ntent
              ntent = ctrlhref;
              //為該元素添加onclick事件activate方法
              Eventobserve(ctrl click thisactivatebindAsEventListener(this) false);
              ctrlonclick = function(){return false;};
       }
       //當單擊鏈接時
       activate: function(){
              if (browser == Internet Explorer){//判斷為IE浏覽器
                     thisgetScroll();
                     thisprepareIE(% hidden);
                     thissetScroll();
                     thishideSelects(hidden);//隱藏所有的<select>標記
              }
              //調用該類中的displayLightbox方法
              thisdisplayLightbox(block);
      }
      prepareIE: function(height overflow){
            bod = documentgetElementsByTagName(body)[];
            bodstyleheight = height;
            bodstyleoverflow = overflow;

            htm = documentgetElementsByTagName(html)[];
            htmstyleheight = height;
            htmstyleoverflow = overflow;
      }
      hideSelects: function(visibility){
           selects = documentgetElementsByTagName(select);
           for(i = ; i < selectslength; i++) {
                   selects[i]stylevisibility = visibility;
            }
      }
      getScroll: function(){
            if (selfpageYOffset) {
                    thisyPos = selfpageYOffset;
            } else if (documentdocumentElement && documentdocumentElementscrollTop){
                    thisyPos = documentdocumentElementscrollTop;
            } else if (documentbody) {
                    thisyPos = documentbodyscrollTop;
            }
      }
      setScroll: function(x y){
            windowscrollTo(x y);
      }
      displayLightbox: function(display){
            //將覆蓋層顯示
            $(overlay)styledisplay = display;
            //將高亮層顯示
            $(lightbox)styledisplay = display;
            //如果不是隱藏狀態則調用該類中的loadInfo方法
            if(display != none) thisloadInfo();
      }
      //該方法發送Ajax請求
      loadInf function() {
            //當請求完成後調用本類中processInfo方法
            var myAjax = new AjaxRequest(
          ntent
          {method: get parameters:  onComplete: thisprocessInfobindAsEvent Listener (this)}
           );
      }
      // 將返回的文本信息顯示到高亮層上
      processInf function(response){
           //獲得返回的文本數據
           var result = responseresponseText;
           //顯示到高亮層
           info = <div id=lbContent> + result + </div>;
           //在info元素前插入一個元素
           new InsertionBefore($(lbLoadMessage) info)
           //改變該元素的class name的值
           $(lightbox)className = done;
           //調用本類中actions方法
           thisactions();
           var ctrl=$(lightbox);
           //為高亮層添加事件處理方法reset
          Eventobserve(ctrl click thisresetbindAsEventListener(this) false);
           ctrlonclick = function(){return false;};
      }
      //恢復初始狀態
      reset:function(){
            //隱藏覆蓋層
           $(overlay)styledisplay=none;
           //清空返回數據
            $(lbContent)innerHTML=;
            //隱藏高亮層
           $(lightbox)styledisplay=none;
     }
     // Search through new links within the lightbox and attach click event
     actions: function(){
           lbActions = documentgetElementsByClassName(lbAction);
           for(i = ; i < lbActionslength; i++) {
                   Eventobserve(lbActions[i] click this[lbActions[i]rel]bindAs EventListener(this) false);
                   lbActions[i]onclick = function(){return false;};
           }
     }
}

　　提示由於該對象比較復雜讀者可以仔細參閱代碼的注釋部分

　　服務器端代碼

　　服務器端首先獲得查詢中的id值如果該值為null或為空則設置為默認值然後判斷該值並且返回相應的一段字符串信息處理請求的getInfohtml class=wordstyle>jsp頁面代碼如下

<%@ page language=java import=javautil*%>
<%
//獲得請求中id的值
  String imgID = requestgetParameter(id);
  if (imgID==null||imgIDequals())//如果為null或為空
      imgID=one;//設定為默認值
  if ( imgIDequals(one))//如果為one
  {
%>
<h id=cartitle >Porsche Carrera GT</h>
<p>The Carrera GT has a  litre V internal combustion engine that produces
   SAE horsepower ( kW) Porsche claims it will accelerate from  to
  km/h ( mph) in  seconds and has a maximum speed of  km/h ( mph)
  With  hp the car weighs  kg ( lb) The Carrera GT is only
  offered with a sixspeed manual transmission in contrast to its rival the
  Ferrari Enzo that is only offered with sequential manual transmission Also
  the Carrera GT is significantly less expensive than the Ferrari Enzo The
  Ferrari Enzo is priced around $ to the Carrera GTs $ The
  Carrera GT is known for its high quality and reliability which makes it one of
  the best supercars ever
<%}else{//否則
%>
<h id=cartitle >Ferrari Testarossa</h>
<p>The Ferrari Testarossa is an V midengined sports car made by Ferrari
  The name which means "red head" comes from the red painted cylinder heads on
  the flat engine The engine was technically a ?V engine since it shared
  flatplane crankshaft pins with opposing cylinders Output was  hp (
  kW) and the car won many comparison tests and admirers  it was featured on
  the cover of Road & Track magazine nine times in just five years Almost
   Testarossas TRs and Ms were produced making this one of the
  most common Ferrari models despite its high price and exotic design
<%}%>
html class=wordstyle>aspx snap_preview_added=spa snap_icon_added=spa act_suffix icon_trigger=false text_trigger=true parent_link_icon=false> class=wordstyle>

From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25454.html