知识大全用JavaScript实现仿Windows关机效果

Posted 2022-07-19 知

篇首语：生活不是等待风暴过去，而是学会在雨中翩翩起舞。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全用JavaScript实现仿Windows关机效果相关的知识，希望对你有一定的参考价值。

用JavaScript实现仿Windows关机效果 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　基本原理分析

　　Windows关机效果分析使用Windows系统的用户在关机的时候出现的界面只允许用户选择关机注销或取消动作而桌面上的程序都不能使用并且屏幕呈现灰色状态

　　本例将仿照这种高亮显示的效果在网页上实现

　　在网页上运用这种关机效果有什么好处呢？首先由于单击某一链接后将用户此时不可用的操作隐藏在后台将可用的操作放在屏幕最上层并高亮显示可以避免用户的误操作其次将信息高亮显示也可以提醒用户应该注意的事项网页中实现关机效果分析在网页中实现这种效果的原理很简单创建两个图层一个为遮盖层覆蓋整个页面并且显示为灰色另一个图层作为高亮显示的部分在遮盖层的上方这可通过设置图层的z index属性来设置当取消关机效果后只需将这两个图层元素在页面中删除即可以下代码实现显示关机效果

<> <head> <title> class= wordstyle >asp?typeid= snap_preview_added= no >Ajax LightBox Sample</title> <style type= text/ class= wordstyle >asp?typeid= snap_preview_added= no >CSS > #lightbox /*该层为高亮显示层*/ BORDER RIGHT: #fff px solid; BORDER TOP: #fff px solid; DISPLAY: block; Z INDEX: ; /*设置该层在网页的最上端设置足够大*/ BACKGROUND: #fdfce ; /*设置背景色*/ LEFT: %; MARGIN: px px px px; BORDER LEFT: #fff px solid; WIDTH: px; BORDER BOTTOM: #fff px solid; POSITION: absolute; TOP: %; HEIGHT: px; TEXT ALIGN: left #overlay /*该层为覆蓋层*/ DISPLAY: block; Z INDEX: ; /*设置高亮层的下方*/ FILTER: alpha(opacity= ); /*设置成透明*/ LEFT: px; WIDTH: %; POSITION: absolute; TOP: px; HEIGHT: %; BACKGROUND COLOR: # ; moz opacity: ; opacity: </style> </head> <body> <! 该层为覆蓋层 > <div id= overlay ></div> <! 该层为高亮显示层 > <div id= lightbox ></div> </body> </>需要注意的是在IE浏览器中如果有<select>标记则该标记不能被覆蓋层覆蓋但在其他浏览器中则可以覆蓋

　　在使用IE浏览器时要先将网页中的<select>元素隐藏起来如以下代码可以用于隐藏页面所有的<select>元素 selects = document getElementsByTagName( select );

for(i = ; i < selects length; i++) selects[i] style visibility = visibility;

　　代码实现客户端代码客户端的页面上有两个链接用户单击链接后向服务器端发送请求并将返回信息显示到高亮层上客户端的网页文件代码如下所示

<> <head> <title>AJAX LightBox</title> <! 本例使用的css样式表文件 > <LINK type=text/css rel=stylesheet> <! prototype类文件 > <script type= text/ class= wordstyle >asp?typeid= snap_preview_added= no > class= wordstyle >javascript src= js/prototype js ></script> <! 本例使用的 class= wordstyle >javascript代码 > <script type= text/ class= wordstyle >javascript src= lightbox js ></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=o >Two</A> </LI> </UL> </div> </body> </>

　　另外还需要设置该页面所使用CSS样式 lightbox css样式表文件代码如下所示

#lightbox BORDER RIGHT: #fff px solid; BORDER TOP: #fff px solid; DISPLAY: none; Z INDEX: ; BACKGROUND: #fdfce ; LEFT: %; MARGIN: px px px px; BORDER LEFT: #fff px solid; WIDTH: px; BORDER BOTTOM: #fff px solid; POSITION: absolute; TOP: %; HEIGHT: px; TEXT ALIGN: left UNKNOWN POSITION: fixed #overlay DISPLAY: none; Z INDEX: ; FILTER: alpha(opacity= ); LEFT: px; WIDTH: %; POSITION: absolute; TOP: px; HEIGHT: %; BACKGROUND COLOR: # ; moz opacity: ; 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: %

　　客户端脚本由于浏览器对图层的支持不同所以首先要确定客户端浏览器的类型以下代码可用于判断客户端的浏览器和 class= wordstyle >asp

snap_preview_added= no >操作系统 var detect = navigator userAgent toLowerCase(); var OS browser version total thestring; function getBrowserInfo() if (checkIt( konqueror )) browser = Konqueror ; OS = 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( patible )) browser = Netscape Navigator version = detect charAt( ); else browser = An unknown browser ; if (!version) version = detect charAt(place + thestring length); 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 = detect indexOf(string) + ; thestring = string; return place; 下面看一下网页加载时需要添加的方法有关网页加载和初始化方法代码如下 //网页加载调用initialize和getBrowserInfo方法 Event observe(window load initialize false); Event observe(window load getBrowserInfo false); //未加载时清空缓存 Event observe(window unload Event unloadCache false); //初始化方法 function initialize() //调用该方法为该页添加覆蓋层和高亮显示层 addLightboxMarkup(); //为每个可高亮显示的元素创建lightbox对象 lbox = document getElementsByClassName( lbOn ); for(i = ; i < lbox length; i++) valid = new lightbox(lbox[i]); // 使用Dom方法创建覆蓋层和高亮层 function addLightboxMarkup() bod = document getElementsByTagName( body )[ ]; 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 : xPos : //构造方法 ctrl为创建该对象的元素 initialize: function(ctrl) //将该元素的链接赋值给ntent ntent = 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( % hidden ); this setScroll( ); this hideSelects( hidden );//隐藏所有的<select>标记 //调用该类中的displayLightbox方法 this displayLightbox( block ); prepareIE: function(height overflow) bod = document getElementsByTagName( body )[ ]; bod style height = height; bod style overflow = overflow; = document getElementsByTagName( )[ ]; style height = height; style overflow = overflow; hideSelects: function(visibility) selects = document getElementsByTagName( select ); for(i = ; 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请求 loadInf function() //当请求完成后调用本类中processInfo方法 var myAjax = new Ajax Request( ntent method: get parameters: onComplete: this processInfo bindAsEvent Listener (this) ); // 将返回的文本信息显示到高亮层上 processInf 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 = ; 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或为空则设置为默认值然后判断该值并且返回相应的一段字符串信息处理请求的getInfo class= wordstyle >jsp页面代码如下

<%@ 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 %> <h id= cartitle >Porsche Carrera GT</h > <p>The Carrera GT has a litre V internal bustion 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 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 $ to the Carrera GT s $ 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 mid engined sports car made by Ferrari The name which means "red head" es from the red painted cylinder heads on the flat engine The engine was technically a ?V engine since it shared flat plane crankshaft pins with opposing cylinders Output was hp ( kW) and the car won many parison 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 mon Ferrari models despite its high price and exotic design <%%> 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 > cha138/Article/program/Java/Javascript/201311/25454

知识大全 用JavaScript实现仿Windows关机效果

知识大全用JavaScript实现仿Windows关机效果