對(duì)于一個(gè)購(gòu)物網(wǎng)站來(lái)說(shuō)，使用多窗口設(shè)計(jì)可能很有用，訪客可能會(huì)發(fā)現(xiàn)自己機(jī)靈地穿梭在一個(gè)琳瑯滿目的商品網(wǎng)站里面，或者對(duì)于一個(gè)專業(yè)性技術(shù)網(wǎng)站則剛好相反，訪客會(huì)覺(jué)得他們進(jìn)入了一個(gè)復(fù)雜無(wú)比漩渦之中。在這里面，我大家介紹五則ja;vascript制作的窗口特效，希望對(duì)你有所幫助，能好好利用。閱讀本文之前，你必須對(duì)ja;vascript有一定的認(rèn)識(shí)。
注：這些特效，必須使用Internet Explorer 4.0 以上的瀏覽器。
1、 打開(kāi)重疊窗口
你在訪問(wèn)一些網(wǎng)站時(shí)，可能遇到過(guò)這樣一種情況：當(dāng)你打開(kāi)站首頁(yè)時(shí)，就有幾個(gè)小窗口重疊出現(xiàn)，讓人有點(diǎn)眼花。這樣設(shè)計(jì)的好處是：如果主頁(yè)面會(huì)打開(kāi)兩個(gè)子窗口。第一個(gè)子窗口可以作為網(wǎng)站內(nèi)容的顯示區(qū)域，而第二個(gè)子窗口則可以用來(lái)當(dāng)成導(dǎo)覽工具列。這樣一來(lái)，使用者可以直接把原來(lái)的主窗口關(guān)掉，網(wǎng)站設(shè)計(jì)者便可以完整地控制各個(gè)導(dǎo)覽元素。
在 ja;vascript 里面，如果我們?cè)谀硞€(gè)窗口A里面打開(kāi)另一個(gè)窗口B，那么窗口A就成為窗口B的「母窗口（parent window）」或者說(shuō)A窗口是B窗口的「打開(kāi)者（opener）」。
下面的程序代碼示范由A窗口里面打開(kāi)B窗口：
＜script language=”ja;vascript”＞
＜!-
var no2 = null;
function cascade2() {
no2 = window.open(‘cascade2.html’,’cas2′,’dependent,width=175,height=175,left=20,top=20′);
}
file://–＞
＜/script＞
＜body ?onLoad=”cascade2()” ?＞
2、 動(dòng)態(tài)改變窗口尺寸
在天極網(wǎng)就曾有過(guò)這種窗口特效：一旦某個(gè)子窗口被打開(kāi)，它的尺寸就并不是非得保持一定不可，而是隨著訪客的瀏覽窗口的改變而改變。這種情況雖說(shuō)有點(diǎn)令人討厭，但對(duì)于廣告效果來(lái)說(shuō)還是挺有效的。
以下是這種效果程序代碼：
注：當(dāng)onClick事件發(fā)生的時(shí)候，子窗口的寬度與高度便會(huì)增加或者減少200個(gè)像素。
var x = 0;
function resizeMe() {
if (x == 0) {
self.resizeBy(200,200);
x = 1;
}
else {
if (x == 1) {
self.resizeBy(-200,-200);
x = 0;
}
}
}
resizeMe() 函數(shù)通過(guò) window 對(duì)象的 resizeBy() 方法來(lái)讓使用者在兩種窗口尺寸之間自由切換。resizeBy() 與 resizeTo() 兩種方法之間的主要差別在于前者的尺寸設(shè)定是相對(duì)性（relative）的，而后者則是使用絕對(duì)（absolute）尺寸。
如果你要改變ja;vascript 建立的窗口的尺寸，千萬(wàn)記得要在打開(kāi)窗口的時(shí)候加上 resizable 關(guān)鍵詞。如果你沒(méi)加的話，你打開(kāi)的這些窗口可是會(huì)動(dòng)也不動(dòng)。
改變窗口尺寸賦予網(wǎng)站設(shè)計(jì)者網(wǎng)站應(yīng)用程序開(kāi)發(fā)過(guò)程中所迫切需要的彈性。請(qǐng)想象一個(gè)搜尋引擎使用者接口，它會(huì)打開(kāi)一個(gè)新窗口，里面純粹只顯示一個(gè)文字輸入字段讓使用者輸入搜尋關(guān)鍵詞。使用者有兩種選擇：開(kāi)始搜尋以及高級(jí)搜尋。按下高級(jí)搜尋按鈕，該窗口便會(huì)自動(dòng)放大高度，顯示出高級(jí)搜尋選項(xiàng)讓使用者選擇。如果使用者直接按下「開(kāi)始搜尋」按鈕，程序便會(huì)開(kāi)始進(jìn)行搜尋并且自動(dòng)放大窗口寬度用來(lái)顯示搜尋結(jié)果。這些全部都在同一個(gè)地方就可以完成了。大部分的搜尋引擎接口都很笨重，一個(gè)又一個(gè)的超鏈接將使用者一次又一次地帶離原本開(kāi)始搜尋的頁(yè)面。在我們想象中的彈跳窗口搜尋接口，使用者完全不會(huì)離開(kāi)原有的畫(huà)面，而且永遠(yuǎn)只需要點(diǎn)一下便可立刻回到原本的主窗口畫(huà)面。
對(duì)于一個(gè)購(gòu)物網(wǎng)站來(lái)說(shuō)，使用多窗口設(shè)計(jì)可能很有用，訪客可能會(huì)發(fā)現(xiàn)自己機(jī)靈地穿梭在一個(gè)琳瑯滿目的商品網(wǎng)站里面，或者對(duì)于一個(gè)專業(yè)性技術(shù)網(wǎng)站則剛好相反，訪客會(huì)覺(jué)得他們進(jìn)入了一個(gè)復(fù)雜無(wú)比漩渦之中。在這里面，我大家介紹五則ja;vascript制作的窗口特效，希望對(duì)你有所幫助，能好好利用。閱讀本文之前，你必須對(duì)ja;vascript有一定的認(rèn)識(shí)。
注：這些特效，必須使用Internet Explorer 4.0 以上的瀏覽器。
1、 打開(kāi)重疊窗口
你在訪問(wèn)一些網(wǎng)站時(shí)，可能遇到過(guò)這樣一種情況：當(dāng)你打開(kāi)站首頁(yè)時(shí)，就有幾個(gè)小窗口重疊出現(xiàn)，讓人有點(diǎn)眼花。這樣設(shè)計(jì)的好處是：如果主頁(yè)面會(huì)打開(kāi)兩個(gè)子窗口。第一個(gè)子窗口可以作為網(wǎng)站內(nèi)容的顯示區(qū)域，而第二個(gè)子窗口則可以用來(lái)當(dāng)成導(dǎo)覽工具列。這樣一來(lái)，使用者可以直接把原來(lái)的主窗口關(guān)掉，網(wǎng)站設(shè)計(jì)者便可以完整地控制各個(gè)導(dǎo)覽元素。
在 ja;vascript 里面，如果我們?cè)谀硞€(gè)窗口A里面打開(kāi)另一個(gè)窗口B，那么窗口A就成為窗口B的「母窗口（parent window）」或者說(shuō)A窗口是B窗口的「打開(kāi)者（opener）」。
下面的程序代碼示范由A窗口里面打開(kāi)B窗口：
＜script language=”ja;vascript”＞
＜!-
var no2 = null;
function cascade2() {
no2 = window.open(‘cascade2.html’,’cas2′,’dependent,width=175,height=175,left=20,top=20′);
}
file://–＞
＜/script＞
＜body ?onLoad=”cascade2()” ?＞
2、 動(dòng)態(tài)改變窗口尺寸
在天極網(wǎng)就曾有過(guò)這種窗口特效：一旦某個(gè)子窗口被打開(kāi)，它的尺寸就并不是非得保持一定不可，而是隨著訪客的瀏覽窗口的改變而改變。這種情況雖說(shuō)有點(diǎn)令人討厭，但對(duì)于廣告效果來(lái)說(shuō)還是挺有效的。
以下是這種效果程序代碼：
注：當(dāng)onClick事件發(fā)生的時(shí)候，子窗口的寬度與高度便會(huì)增加或者減少200個(gè)像素。
var x = 0;
function resizeMe() {
if (x == 0) {
self.resizeBy(200,200);
x = 1;
}
else {
if (x == 1) {
self.resizeBy(-200,-200);
x = 0;
}
}
}
resizeMe() 函數(shù)通過(guò) window 對(duì)象的 resizeBy() 方法來(lái)讓使用者在兩種窗口尺寸之間自由切換。resizeBy() 與 resizeTo() 兩種方法之間的主要差別在于前者的尺寸設(shè)定是相對(duì)性（relative）的，而后者則是使用絕對(duì)（absolute）尺寸。
如果你要改變ja;vascript 建立的窗口的尺寸，千萬(wàn)記得要在打開(kāi)窗口的時(shí)候加上 resizable 關(guān)鍵詞。如果你沒(méi)加的話，你打開(kāi)的這些窗口可是會(huì)動(dòng)也不動(dòng)。
改變窗口尺寸賦予網(wǎng)站設(shè)計(jì)者網(wǎng)站應(yīng)用程序開(kāi)發(fā)過(guò)程中所迫切需要的彈性。請(qǐng)想象一個(gè)搜尋引擎使用者接口，它會(huì)打開(kāi)一個(gè)新窗口，里面純粹只顯示一個(gè)文字輸入字段讓使用者輸入搜尋關(guān)鍵詞。使用者有兩種選擇：開(kāi)始搜尋以及高級(jí)搜尋。按下高級(jí)搜尋按鈕，該窗口便會(huì)自動(dòng)放大高度，顯示出高級(jí)搜尋選項(xiàng)讓使用者選擇。如果使用者直接按下「開(kāi)始搜尋」按鈕，程序便會(huì)開(kāi)始進(jìn)行搜尋并且自動(dòng)放大窗口寬度用來(lái)顯示搜尋結(jié)果。這些全部都在同一個(gè)地方就可以完成了。大部分的搜尋引擎接口都很笨重，一個(gè)又一個(gè)的超鏈接將使用者一次又一次地帶離原本開(kāi)始搜尋的頁(yè)面。在我們想象中的彈跳窗口搜尋接口，使用者完全不會(huì)離開(kāi)原有的畫(huà)面，而且永遠(yuǎn)只需要點(diǎn)一下便可立刻回到原本的主窗口畫(huà)面。
我曾經(jīng)在網(wǎng)上看過(guò)一些窗口內(nèi)容卷動(dòng)范例，在范例中我使用document.body.scrollHeight或者document.height的地方改用一個(gè)隨便決定的很大的數(shù)字來(lái)代替。這種做法并不很好，因?yàn)樵谶@種狀況下，當(dāng)窗口內(nèi)容卷動(dòng)到最底端的時(shí)候，如果使用者不移動(dòng)光標(biāo)的話，那么y坐標(biāo)的值就會(huì)持續(xù)地繼續(xù)增加。這樣一來(lái)當(dāng)使用者按下向上卷動(dòng)的箭頭按鈕的時(shí)候，頁(yè)面內(nèi)容卻還是不會(huì)立刻開(kāi)始往上卷動(dòng)，因?yàn)楹瘮?shù)還在繼續(xù)將窗口內(nèi)容向下卷動(dòng)，直到達(dá)到程序里面設(shè)定的值才會(huì)停止。
scrollMe() 函數(shù)在onMouseOver事件發(fā)生的時(shí)候被呼叫，另一個(gè)stopMe()函數(shù)則相對(duì)應(yīng)地在onMouseOut事件發(fā)生時(shí)開(kāi)始執(zhí)行：
function stopMe() {
clearTimeout(when);
}
同一個(gè)函數(shù)也可以用來(lái)停止向上卷動(dòng)。
讓內(nèi)容向上卷動(dòng)所用的函數(shù)和向下卷動(dòng)非常類似：
function rollMe() {
if (y ＞= 0) {
ps.scroll(0,y)
y =y- 4;
when = setTimeout(‘rollMe()’,1);
}
}
rollMe() 函數(shù)首先檢查變量y是否大于或等于0。如果成立，scrollee 分割窗口便會(huì)往上卷動(dòng)4個(gè)像素。正如同scrollMe() 函數(shù)一樣，變量when用來(lái)讓網(wǎng)頁(yè)內(nèi)容每隔一毫秒便重復(fù)向上卷動(dòng)4個(gè)像素。
下面這個(gè)函數(shù)可以讓網(wǎng)頁(yè)內(nèi)容直接卷動(dòng)到最上方：
function topMe() {
ps.scroll(0,0);
y= 0;
}
如果你在 topMe() 函數(shù)里面不重新設(shè)定變量y的值成為 0，那么當(dāng)你往下或者往上卷動(dòng)的時(shí)候，頁(yè)面內(nèi)容會(huì)直接跳回你呼叫 topMe() 之前所在的位置去。
下面這個(gè)函數(shù)可以把窗口內(nèi)容直接卷動(dòng)到最底端：
function bopMe() {
if (document.all) {
ps.scroll(0,ps.document.body.scrollHeight);
y= ps.document.body.scrollHeight;
} else {
ps.scroll(0,ps.document.height);
y= ps.document.height;
}
}
窗口內(nèi)容卷動(dòng)功能最能發(fā)揮功用的地方應(yīng)該是在使用CSSP設(shè)定的時(shí)候。然而要銘記在心的是，你可以使用類似的技巧來(lái)卷動(dòng)其它窗口的內(nèi)容，或者用來(lái)控制內(nèi)容卷動(dòng)的目的地。
5、 動(dòng)態(tài)移動(dòng)的窗口特效
在一些網(wǎng)站里如：天極網(wǎng)等，它的有的子窗口會(huì)不時(shí)自己移動(dòng)，飄來(lái)飄去，很特別。會(huì)自己移動(dòng)位置的窗口便顯得不僅僅是酷，而是更有實(shí)際上的功能了，動(dòng)態(tài)改變窗口位置能夠讓網(wǎng)頁(yè)設(shè)計(jì)者重新安排窗口位置以便達(dá)到最佳的信息顯示方式。
移動(dòng)窗口位置的程序代碼看起來(lái)和改變窗口尺寸非常相似：
var x = 0;
function moveMe() {
if (x == 0) {
self.moveBy(200,200);
x = 1;
}
else {
if (x == 1) {
self.moveBy(-200,-200);
x = 0;
}
}
}
在這個(gè)例子里面，moveMe() 函數(shù)使用 window 對(duì)象的moveBy() 函數(shù)讓使用者把窗口移動(dòng)到某個(gè)位置，然后再移回原處。moveBy() 和 moveTo() 方法的差異在于前者的移動(dòng)位置是相對(duì)性的，而后者移動(dòng)位置采用的是絕對(duì)坐標(biāo)。
]]>