用JavaScript实现仿Windows关机效果

2024-09-28 18:47:26

基本原理分析

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%;
      BACKGROUND-COLOR: #000;
      moz-opacity: 0.8;
      opacity: .80
}
</style>
</head>
<body>

<div id="overlay"></div>

<div id="lightbox"></div>
</body>
</html>
需要注意的是，在IE浏览器中如果有<select>标记，则该标记不能被覆盖层覆盖，但在其他浏览器中则可以覆盖。

在使用IE浏览器时，要先将网页中的<select>元素隐藏起来。如以下代码可以用于隐藏页面所有的<select>元素。
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}

代码实现

客户端代码
客户端的页面上有两个链接，用户单击链接后，向服务器端发送请求，并将返回信息显示到高亮层上。客户端的网页文件代码如下所示：
<html>
<head>
<title>AJAX LightBox</title>

<LINK href="lightbox.css" type=text/css rel=stylesheet>

<script type="text/javascript" src="js/prototype.js" ></script>

<script type="text/javascript" src="lightbox.js" ></script>
</head>
<body>
<DIV id=container>
<UL>
  <LI><A class=lbOn href="getInfo.jsp?id=one">One</A>
  </LI>
  <LI><A class=lbOn href="getInfo.jsp?id=two">Two</A>
  </LI>
</UL>
</div>
</body>
</html>

另外，还需要设置该页面所使用CSS样式。lightbox.css样式表文件代码如下所示：
#lightbox {
      BORDER-RIGHT: #fff 1px solid;
      BORDER-TOP: #fff 1px solid;
       DISPLAY: none;
       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
}
UNKNOWN {
     POSITION: fixed
}
#overlay {
      DISPLAY: none;
      Z-INDEX: 5000; FILTER: alpha(opacity=80);
      LEFT: 0px;
      WIDTH: 100%;
      POSITION: absolute;
      TOP: 0px;
      HEIGHT: 100%;
      BACKGROUND-COLOR: #000; moz-opacity: 0.8; opacity: .80
}
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: 100%; HEIGHT: 100%
}
客户端脚本
由于浏览器对图层的支持不同，所以首先要确定客户端浏览器的类型。以下代码可用于判断客户端的浏览器和操作系统。
var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;

function getBrowserInfo() {
       if (checkIt('konqueror')) {
            browser = "Konqueror";
            OS = "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 = detect.charAt(8);
       }
       else browser = "An unknown browser";

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 = "an unknown operating system";
       }
}

// 使用Dom方法创建覆盖层和高亮层
function addLightboxMarkup() {
        bod = document.getElementsByTagName('body')[0];
        overlay = document.createElement('div');
        overlay.id = 'overlay';
        lb = document.createElement('div');
        lb.id = 'lightbox';
        lb.className = 'loading';
        lb.innerHTML = '<div id="lbLoadMessage">' +
                                           '<p>Loading</p>' +
                                           '</div>';
        bod.appendChild(overlay);
        bod.appendChild(lb);
}
封装lightbox类
初始化数据时，为每个可高亮显示的链接创建了lightbox对象。该类的代码具体实现如下：
var lightbox = Class.create();

lightbox.prototype = {
       yPos : 0,
       xPos : 0,
      //构造方法,ctrl为创建该对象的元素
       initialize: function(ctrl) {
              //将该元素的链接赋值给this.content
              this.content = ctrl.href;
              //为该元素添加onclick事件activate方法
              Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
              ctrl.onclick = function(){return false;};
       },

//当单击链接时
       activate: function(){
              if (browser == 'Internet Explorer'){//判断为IE浏览器
                     this.getScroll();
                     this.prepareIE('100%', 'hidden');
                     this.setScroll(0,0);
                     this.hideSelects('hidden');//隐藏所有的<select>标记
              }
              //调用该类中的displayLightbox方法
              this.displayLightbox("block");
      },

prepareIE: function(height, overflow){
            bod = document.getElementsByTagName('body')[0];
            bod.style.height = height;
            bod.style.overflow = overflow;

htm = document.getElementsByTagName('html')[0];
            htm.style.height = height;
            htm.style.overflow = overflow;
      },

hideSelects: function(visibility){
           selects = document.getElementsByTagName('select');
           for(i = 0; i < selects.length; i++) {
                   selects[i].style.visibility = visibility;
            }
      },

getScroll: function(){
            if (self.pageYOffset) {
                    this.yPos = 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.scrollTo(x, y);
},

displayLightbox: function(display){
            //将覆盖层显示
            $('overlay').style.display = display;
            //将高亮层显示
            $('lightbox').style.display = display;
            //如果不是隐藏状态,则调用该类中的loadInfo方法
            if(display != 'none') this.loadInfo();
      },

//该方法发送Ajax请求
      loadInfo: function() {
            //当请求完成后调用本类中processInfo方法
            var myAjax = new Ajax.Request(
          this.content,
          {method: 'get', parameters: "", onComplete: this.processInfo.bindAsEvent Listener (this)}
           );

},
      // 将返回的文本信息显示到高亮层上
      processInfo: function(response){
           //获得返回的文本数据
           var result = response.responseText;
           //显示到高亮层
           info = "<div id='lbContent'>" + result + "</div>";
           //在info元素前插入一个元素
           new Insertion.Before($('lbLoadMessage'), info)
           //改变该元素的class name的值
           $('lightbox').className = "done";
           //调用本类中actions方法
           this.actions();
           var ctrl=$('lightbox');
           //为高亮层添加事件处理方法reset
          Event.observe(ctrl, 'click', this.reset.bindAsEventListener(this), false);
           ctrl.onclick = function(){return false;};
      },
      //恢复初始状态
      reset:function(){
            //隐藏覆盖层
           $('overlay').style.display="none";
           //清空返回数据
            $('lbContent').innerHTML="";
            //隐藏高亮层
           $('lightbox').style.display="none";
     },
     // Search through new links within the lightbox, and attach click event
     actions: function(){
           lbActions = document.getElementsByClassName('lbAction');
           for(i = 0; i < lbActions.length; i++) {
                   Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAs EventListener(this), false);
                   lbActions[i].onclick = function(){return false;};
           }

}
}

提示：由于该对象比较复杂，读者可以仔细参阅代码的注释部分。

服务器端代码

服务器端首先获得查询中的“id”值，如果该值为null或为空，则设置为默认值。然后判断该值，并且返回相应的一段字符串信息。处理请求的getInfojsp页面代码如下：
<%@ page language="java" import="java.util.*"%>
<%
//获得请求中id的值
  String imgID = request.getParameter("id");
  if (imgID==null||imgID.equals(""))//如果为null或为空
      imgID="one";//设定为默认值
  if ( imgID.equals("one"))//如果为one
  {
%>
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Porsche Carrera GT</h3>
<p>The Carrera GT has a 5.7 litre V10 internal combustion engine that produces
  605 SAE horsepower (451 kW). Porsche claims it will accelerate from 0 to 100
  km/h (62 mph) in 3.9 seconds and has a maximum speed of 330 km/h (204 mph).
  With 605 hp, the car weighs 1,380 kg (3,042 lb). The Carrera GT is only
  offered with a six-speed 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 $660,000 to the Carrera GT's $440,000. The
  Carrera GT is known for its high quality and reliability which makes it one of
  the best supercars ever.
<%}else{//否则
%>
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ferrari Testarossa</h3>
<p>The Ferrari Testarossa is an V12 mid-engined sports car made by Ferrari.
  The name, which means "red head", comes from the red painted cylinder heads on
  the flat-12 engine. The engine was technically a 180?V engine since it shared
  flat-plane crankshaft pins with opposing cylinders. Output was 390 hp (291
  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
  10,000 Testarossas, 512TRs, and 512Ms were produced, making this one of the
  most common Ferrari models despite its high price and exotic design.
<%}%>

用JavaScript实现仿Windows关机效果

基本原理分析 Windows关机效果分析使用Windows系统的用户在关机的时候,出现的界面只允许用户选择关机.注销或取消动作,而桌面上的程序都不能使用,并且屏幕呈现灰色状态. 本例将仿照这种高亮显示的效果在网页上实现. 在网页上运用这种关机效果有什么好处呢?首先,由于单击某一链接后,将用户此时不可用的操作隐藏在后台,将可用的操作放在屏幕最上层,并高亮显示,可以避免用户的误操作.其次,将信息高亮显示,也可以提醒用户应该注意的事项. 网页中实现关机效果分析在网页中实现这种效果的原理很简单.创建
javascript仿XP关机效果的弹出窗口功能

不管是做网站还是一些应用系统,都免不了要用到一些弹出的效果,在ZJ-BLOG V1.0 Beta2版本我在一些功能使用了网络上比较流行的仿XP关机效果的弹出功能,按目前的反应来说还是效果不错的,下面将此功能整一下儿,如果有需要大家可以直接使用到自己的网站或是应用系统中去. 不在详细的说明代码了,帖出代码之前需要说明一点儿的是IE环境下,由于下拉框(select元素)优先级太高了,弹出的div元素无法盖住下拉框元素,很烦人的一个IE的BUG(个人认为是BUG ^o^),我使用的方法是在弹出时隐藏掉
利用JavaScript实现仿京东放大镜效果

功能实现 1.鼠标经过小图片盒子,黄色的遮挡层和大图片显示,离开时就隐藏2个盒子功能 2.黄色遮挡层跟着鼠标走把鼠标的坐标给盒子,不断地进行赋值操作把鼠标地坐标给遮挡层不合适,因为遮挡层坐标以父盒子为准首先是获得鼠标在盒子内地坐标然后把数值给遮挡层地left和top值此时用到鼠标移动事件,但是还是在小图片盒子内移动发现,遮挡层位置不对,需要再减去盒子自身高度和宽度地一半遮挡层不能超出小图片盒子范围如果小于0,就把坐标设置为0 如果大于遮挡层最大地移动距离,就把坐标设置为最大地移动
js实现仿Windows风格选项卡和按钮效果实例

本文实例讲述了js实现仿Windows风格选项卡和按钮效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style type="text/css"> <!-- body{ font-family: 'MS Shell Dl
JS实现不使用图片仿Windows右键菜单效果代码

本文实例讲述了JS实现不使用图片仿Windows右键菜单效果代码.分享给大家供大家参考,具体如下: 这里演示JS不使用图片仿Windows右键菜单效果,这款代码灵活使用了文鼎字,配合CSS和JS做出了这个和系统右键菜单很相似的东东. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-windows-right-button-menu-codes/ 具体代码如下: <HTML> <HEAD> <TITLE>极酷的多级右
JavaScript仿微博输入框效果(案例分析)

这篇文章给大家分享一个小的JavaScript的案例,就是模仿微博输入框的效果. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿微博输入框效果</title> <script src="jquery.js"></script> </h
JavaScript仿windows计算器功能

本文实例为大家分享了JavaScript仿windows计算器的具体代码,供大家参考,具体内容如下任务要求: 名称:仿windows计算器功能: 1.实现单击按钮录入数字2.实现基础四则运算功能,并添加必要的异常处理,例如,除数为03.实现小数点功能并添加异常处理:小数点只能出现一次4.实现正负号功能5.实现退位功能,已经是最后一位时,显示框显示为06.清屏功能使用的知识点: 1.利用大量的自定义函数实现业务逻辑2.灵活运用事件及事件处理3.培养异常处理的编程方法4.培养并实践利用不同思路实
利用JavaScript实现仿QQ个人资料卡效果

目录前言思路实现代码 HTML CSS 背景音乐 JavaScript 最终效果前言最近在学习前端的知识,无意间发现QQ 那个个人资料卡还挺好看的,就想着自己能不能照着原版搞出一个高仿出来,话不多时直接开始先睡上一觉,找找灵感,睡醒来又饿了,出去吃个饭,回来天tm都黑了,哈哈哈哈,金今天又是摆烂的一天,啊啊啊,不行至少今天这篇博客得写个前言部分…于是乎我们来到第二天,开始干(要干啥来着,幸亏昨天还写了个标题,要不然都忘了——HTML+CSS+JS实现仿QQ个人资料卡) 不多逼逼直接上干
基于C#实现的仿windows左侧伸缩菜单效果

本文所述为基于C#实现的折叠菜单,风格仿照Windows打开我的电脑后左侧的伸缩菜单效果,并且同样是蓝色的效果,看着和windows的效果一样漂亮,可以实现折叠.展开等功能.这在学习C#界面编程的时候能用上,其主要实现代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq
JS实现仿Windows经典风格的选项卡Tab切换代码

本文实例讲述了JS实现仿Windows经典风格的选项卡Tab切换代码.分享给大家供大家参考,具体如下: 这款仿Windows风格的选项卡,带有灰色的立体感,示例内容是用JS控制输出,只是为了演示功能,你在用的时候完全可以去掉的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-windows-style-tab-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

用JavaScript实现仿Windows关机效果

相关推荐

随机推荐