精品久久亚洲中文无码,国产亚洲精品VA片在线播放,国产成人麻豆亚洲综合无码精品

Windows關(guān)機效果分析

Posted on 2007-09-26 16:39 semovy 閱讀(395) 評論(0) 編輯收藏所屬分類: JavaScript 、CSS式樣、ajax

基本原理分析

Windows關(guān)機效果分析

使用Windows系統(tǒng)的用戶在關(guān)機的時候，出現(xiàn)的界面只允許用戶選擇關(guān)機、注銷或取消動作，而桌面上的程序都不能使用，并且屏幕呈現(xiàn)灰色狀態(tài)。

本例將仿照這種高亮顯示的效果在網(wǎng)頁上實現(xiàn).

在網(wǎng)頁上運用這種關(guān)機效果有什么好處呢？首先，由于單擊某一鏈接后，將用戶此時不可用的操作隱藏在后臺，將可用的操作放在屏幕最上層，并高亮顯示，可以避免用戶的誤操作。其次，將信息高亮顯示，也可以提醒用戶應(yīng)該注意的事項。

網(wǎng)頁中實現(xiàn)關(guān)機效果分析

在網(wǎng)頁中實現(xiàn)這種效果的原理很簡單。創(chuàng)建兩個圖層，一個為遮蓋層，覆蓋整個頁面，并且顯示為灰色；另一個圖層作為高亮顯示的部分，在遮蓋層的上方，這可通過設(shè)置圖層的z-index屬性來設(shè)置。當取消關(guān)機效果后，只需將這兩個圖層元素在頁面中刪除即可。

以下代碼實現(xiàn)顯示關(guān)機效果。

以下是引用片段：

<html>

<head>

<title>html" class="wordstyle">asp?typeid=119" snap_preview_added="no">Ajax LightBox Sample</title>

<style type="text/html" class="wordstyle">asp?typeid=38" snap_preview_added="no">CSS">

#lightbox {/*該層為高亮顯示層*/

BORDER-RIGHT: #fff 1px solid;

BORDER-TOP: #fff 1px solid;

DISPLAY: block;

Z-INDEX: 9999; /*設(shè)置該層在網(wǎng)頁的最上端,設(shè)置足夠大*/

BACKGROUND: #fdfce9; /*設(shè)置背景色*/

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; /*設(shè)置高亮層的下方*/

FILTER: alpha(opacity=80); /*設(shè)置成透明*/

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瀏覽器時，要先將網(wǎng)頁中的<select>元素隱藏起來。如以下代碼可以用于隱藏頁面所有的<select>元素。

selects = document.getElementsByTagName('select');

以下是引用片段：

for(i = 0; i < selects.length; i++) {

selects[i].style.visibility = visibility;

}

代碼實現(xiàn)

客戶端代碼

客戶端的頁面上有兩個鏈接，用戶單擊鏈接后，向服務(wù)器端發(fā)送請求，并將返回信息顯示到高亮層上。客戶端的網(wǎng)頁文件代碼如下所示：

以下是引用片段：

<html>

<head>

<title>AJAX LightBox</title>



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



<script type="text/html" class="wordstyle">asp?typeid=36" snap_preview_added="no">html" class="wordstyle">

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



<script type="text/html" class="wordstyle">javascript" src="lightbox.js" ></script>

</head>

<body>

<DIV id=container>

<UL>

<LI><A class=lbOn href="getInfo.html" class="wordstyle">jsp?id=one">One</A>

</LI>

<LI><A class=lbOn href="getInfo.html" class="wordstyle">jsp?id=two">Two</A>

</LI>

</UL>

</div>

</body>

</html>

另外，還需要設(shè)置該頁面所使用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%

}

客戶端腳本

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

以下是引用片段：

snap_preview_added="no">操作系統(tǒng)。

var detect = navigator.userAgent.toLowerCase();

var OS,browser,version,total,thestring;

function getBrowserInfo() {

if (checkIt('konqueror')) {

browser = "Konqueror";

OS = "html" class="wordstyle">asp?typeid=60" 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 = 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";

}

}

function checkIt(string) {

place = detect.indexOf(string) + 1;

thestring = string;

return place;

}

下面看一下網(wǎng)頁加載時需要添加的方法。有關(guān)網(wǎng)頁加載和初始化方法代碼如下：

//網(wǎng)頁加載調(diào)用initialize和getBrowserInfo方法

Event.observe(window, 'load', initialize, false);

Event.observe(window, 'load', getBrowserInfo, false);

//未加載時清空緩存

Event.observe(window, 'unload', Event.unloadCache, false);

//初始化方法

function initialize(){

//調(diào)用該方法為該頁添加覆蓋層和高亮顯示層

addLightboxMarkup();

//為每個可高亮顯示的元素創(chuàng)建lightbox對象

lbox = document.getElementsByClassName('lbOn');

for(i = 0; i < lbox.length; i++) {

valid = new lightbox(lbox[i]);

}

}

// 使用Dom方法創(chuàng)建覆蓋層和高亮層

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類

初始化數(shù)據(jù)時，為每個可高亮顯示的鏈接創(chuàng)建了lightbox對象。該類的代碼具體實現(xiàn)如下：

var lightbox = Class.create();

lightbox.prototype = {

yPos : 0,

xPos : 0,

//構(gòu)造方法,ctrl為創(chuàng)建該對象的元素

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>標記

}

//調(diào)用該類中的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;

//如果不是隱藏狀態(tài),則調(diào)用該類中的loadInfo方法

if(display != 'none') this.loadInfo();

},

//該方法發(fā)送Ajax請求

loadInf function() {

//當請求完成后調(diào)用本類中processInfo方法

var myAjax = new Ajax.Request(

this.content,

{method: 'get', parameters: "", onComplete: this.processInfo.bindAsEvent Listener (this)}

);

},

// 將返回的文本信息顯示到高亮層上

processInf function(response){

//獲得返回的文本數(shù)據(jù)

var result = response.responseText;

//顯示到高亮層

info = "<div id='lbContent'>" + result + "</div>";

//在info元素前插入一個元素

new Insertion.Before($('lbLoadMessage'), info)

//改變該元素的class name的值

$('lightbox').className = "done";

//調(diào)用本類中actions方法

this.actions();

var ctrl=$('lightbox');

//為高亮層添加事件處理方法reset

Event.observe(ctrl, 'click', this.reset.bindAsEventListener(this), false);

ctrl.onclick = function(){return false;};

},

//恢復(fù)初始狀態(tài)

reset:function(){

//隱藏覆蓋層

$('overlay').style.display="none";

//清空返回數(shù)據(jù)

$('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;};

}

}

}

提示：由于該對象比較復(fù)雜，讀者可以仔細參閱代碼的注釋部分。

服務(wù)器端代碼

服務(wù)器端首先獲得查詢中的“id”值，如果該值為null或為空，則設(shè)置為默認值。然后判斷該值，并且返回相應(yīng)的一段字符串信息。處理請求的getInfohtml" class="wordstyle">jsp頁面代碼如下：

以下是引用片段：

<%@ page language="java" import="java.util.*"%>

<%

//獲得請求中id的值

String imgID = request.getParameter("id");

if (imgID==null||imgID.equals(""))//如果為null或為空

imgID="one";//設(shè)定為默認值

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.

<%}%>

html" class="wordstyle">aspx" snap_preview_added="spa" snap_icon_added="spa" act_suffix ic

【責任編輯：城塵 TEL：(010) 68476636-8003】

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: 兼容IE8、火狐的本地圖片預(yù)覽+等比例縮放 Javascript 方法大全 JAVASCRIPT校驗大全調(diào)用qq的方法得到頁面body區(qū)域內(nèi)容的高度 Javascript面向?qū)ο筇匦裕ㄞD(zhuǎn)載）轉(zhuǎn)一個。。js在IE與firefox的差別。。。壓縮js的網(wǎng)站 js運行客戶端程序 escape,encodeURI,encodeURIComponent 比較

semovy

Windows關(guān)機效果分析

日歷

留言簿(7)

隨筆分類

隨筆檔案(1)

文章分類(377)

文章檔案(356)

相冊

收藏夾(18)

昨天重現(xiàn)

搜索

最新評論