用JavaScript實現仿Windows關機效果

2024-09-06 12:43:02

字體：大中小

來源：轉載

供稿：網友

基本原理分析

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

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

在網頁上運用這種關機效果有什么好處呢？首先，由于單擊某一鏈接后，將用戶此時不可用的操作隱藏在后臺，將可用的操作放在屏幕最上層，并高亮顯示，可以避免用戶的誤操作。其次，將信息高亮顯示，也可以提醒用戶應該注意的事項。
網頁中實現關機效果分析
在網頁中實現這種效果的原理很簡單。創建兩個圖層，一個為遮蓋層，覆蓋整個頁面，并且顯示為灰色；另一個圖層作為高亮顯示的部分，在遮蓋層的上方，這可通過設置圖層的z-index屬性來設置。當取消關機效果后，只需將這兩個圖層元素在頁面中刪除即可。
以下代碼實現顯示關機效果。
<html>
<head>
<title>AJAX LightBox Sample</title>
<style type="text/css">
#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;
       BORDER-LEFT: #fff 1px solid;
       WIDTH: 500px;
       BORDER-BOTTOM: #fff 1px solid;
       POSITION: absolute;
       TOP: 50%;
       HEIGHT: 400px;
       TEXT-ALIGN: left
}
#overlay {/*該層為覆蓋層*/
      DISPLAY: block;
      Z-INDEX: 9998; /*設置高亮層的下方*/
      FILTER: alpha(opacity=80); /*設置成透明*/
      LEFT: 0px;
      WIDTH: 100%;
      POSITION: absolute;
      TOP: 0px;
      HEIGHT: 100%;

上一篇：可以文本顯示的公告欄的js代碼

下一篇：HTML在線編輯器的基本概念與相關資料第1/2頁