對于一個(gè)購物網(wǎng)站來說，使用多窗口設(shè)計(jì)可能很有用，訪客可能會發(fā)現(xiàn)自己機(jī)靈地穿梭在一個(gè)琳瑯滿目的商品網(wǎng)站里面，或者對于一個(gè)專業(yè)性技術(shù)網(wǎng)站則剛好相反，訪客會覺得他們進(jìn)入了一個(gè)復(fù)雜無比漩渦之中。在這里面，我大家介紹五則ja;vascript制作的窗口特效，希望對你有所幫助，能好好利用。閱讀本文之前，你必須對ja;vascript有一定的認(rèn)識。

　　注：這些特效，必須使用Internet Explorer 4.0 以上的瀏覽器。

　　1、 打開重疊窗口

　　你在訪問一些網(wǎng)站時(shí)，可能遇到過這樣一種情況：當(dāng)你打開站首頁時(shí)，就有幾個(gè)小窗口重疊出現(xiàn)，讓人有點(diǎn)眼花。這樣設(shè)計(jì)的好處是：如果主頁面會打開兩個(gè)子窗口。第一個(gè)子窗口可以作為網(wǎng)站內(nèi)容的顯示區(qū)域，而第二個(gè)子窗口則可以用來當(dāng)成導(dǎo)覽工具列。這樣一來，使用者可以直接把原來的主窗口關(guān)掉，網(wǎng)站設(shè)計(jì)者便可以完整地控制各個(gè)導(dǎo)覽元素。

　　在 ja;vascript 里面，如果我們在某個(gè)窗口A里面打開另一個(gè)窗口B，那么窗口A就成為窗口B的「母窗口（parent window）」或者說A窗口是B窗口的「打開者（opener）」。

　　下面的程序代碼示范由A窗口里面打開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、 動態(tài)改變窗口尺寸

　　在天極網(wǎng)就曾有過這種窗口特效：一旦某個(gè)子窗口被打開，它的尺寸就并不是非得保持一定不可，而是隨著訪客的瀏覽窗口的改變而改變。這種情況雖說有點(diǎn)令人討厭，但對于廣告效果來說還是挺有效的。

　　以下是這種效果程序代碼：

　　注：當(dāng)onClick事件發(fā)生的時(shí)候，子窗口的寬度與高度便會增加或者減少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ù)通過 window 對象的 resizeBy() 方法來讓使用者在兩種窗口尺寸之間自由切換。resizeBy() 與 resizeTo() 兩種方法之間的主要差別在于前者的尺寸設(shè)定是相對性（relative）的，而后者則是使用絕對（absolute）尺寸。

　　如果你要改變ja;vascript 建立的窗口的尺寸，千萬記得要在打開窗口的時(shí)候加上 resizable 關(guān)鍵詞。如果你沒加的話，你打開的這些窗口可是會動也不動。

　　改變窗口尺寸賦予網(wǎng)站設(shè)計(jì)者網(wǎng)站應(yīng)用程序開發(fā)過程中所迫切需要的彈性。請想象一個(gè)搜尋引擎使用者接口，它會打開一個(gè)新窗口，里面純粹只顯示一個(gè)文字輸入字段讓使用者輸入搜尋關(guān)鍵詞。使用者有兩種選擇：開始搜尋以及高級搜尋。按下高級搜尋按鈕，該窗口便會自動放大高度，顯示出高級搜尋選項(xiàng)讓使用者選擇。如果使用者直接按下「開始搜尋」按鈕，程序便會開始進(jìn)行搜尋并且自動放大窗口寬度用來顯示搜尋結(jié)果。這些全部都在同一個(gè)地方就可以完成了。大部分的搜尋引擎接口都很笨重，一個(gè)又一個(gè)的超鏈接將使用者一次又一次地帶離原本開始搜尋的頁面。在我們想象中的彈跳窗口搜尋接口，使用者完全不會離開原有的畫面，而且永遠(yuǎn)只需要點(diǎn)一下便可立刻回到原本的主窗口畫面。

　　對于一個(gè)購物網(wǎng)站來說，使用多窗口設(shè)計(jì)可能很有用，訪客可能會發(fā)現(xiàn)自己機(jī)靈地穿梭在一個(gè)琳瑯滿目的商品網(wǎng)站里面，或者對于一個(gè)專業(yè)性技術(shù)網(wǎng)站則剛好相反，訪客會覺得他們進(jìn)入了一個(gè)復(fù)雜無比漩渦之中。在這里面，我大家介紹五則ja;vascript制作的窗口特效，希望對你有所幫助，能好好利用。閱讀本文之前，你必須對ja;vascript有一定的認(rèn)識。

　　注：這些特效，必須使用Internet Explorer 4.0 以上的瀏覽器。

　　1、 打開重疊窗口

　　你在訪問一些網(wǎng)站時(shí)，可能遇到過這樣一種情況：當(dāng)你打開站首頁時(shí)，就有幾個(gè)小窗口重疊出現(xiàn)，讓人有點(diǎn)眼花。這樣設(shè)計(jì)的好處是：如果主頁面會打開兩個(gè)子窗口。第一個(gè)子窗口可以作為網(wǎng)站內(nèi)容的顯示區(qū)域，而第二個(gè)子窗口則可以用來當(dāng)成導(dǎo)覽工具列。這樣一來，使用者可以直接把原來的主窗口關(guān)掉，網(wǎng)站設(shè)計(jì)者便可以完整地控制各個(gè)導(dǎo)覽元素。

　　在 ja;vascript 里面，如果我們在某個(gè)窗口A里面打開另一個(gè)窗口B，那么窗口A就成為窗口B的「母窗口（parent window）」或者說A窗口是B窗口的「打開者（opener）」。

　　下面的程序代碼示范由A窗口里面打開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、 動態(tài)改變窗口尺寸

　　在天極網(wǎng)就曾有過這種窗口特效：一旦某個(gè)子窗口被打開，它的尺寸就并不是非得保持一定不可，而是隨著訪客的瀏覽窗口的改變而改變。這種情況雖說有點(diǎn)令人討厭，但對于廣告效果來說還是挺有效的。

　　以下是這種效果程序代碼：

　　注：當(dāng)onClick事件發(fā)生的時(shí)候，子窗口的寬度與高度便會增加或者減少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ù)通過 window 對象的 resizeBy() 方法來讓使用者在兩種窗口尺寸之間自由切換。resizeBy() 與 resizeTo() 兩種方法之間的主要差別在于前者的尺寸設(shè)定是相對性（relative）的，而后者則是使用絕對（absolute）尺寸。

　　如果你要改變ja;vascript 建立的窗口的尺寸，千萬記得要在打開窗口的時(shí)候加上 resizable 關(guān)鍵詞。如果你沒加的話，你打開的這些窗口可是會動也不動。

　　改變窗口尺寸賦予網(wǎng)站設(shè)計(jì)者網(wǎng)站應(yīng)用程序開發(fā)過程中所迫切需要的彈性。請想象一個(gè)搜尋引擎使用者接口，它會打開一個(gè)新窗口，里面純粹只顯示一個(gè)文字輸入字段讓使用者輸入搜尋關(guān)鍵詞。使用者有兩種選擇：開始搜尋以及高級搜尋。按下高級搜尋按鈕，該窗口便會自動放大高度，顯示出高級搜尋選項(xiàng)讓使用者選擇。如果使用者直接按下「開始搜尋」按鈕，程序便會開始進(jìn)行搜尋并且自動放大窗口寬度用來顯示搜尋結(jié)果。這些全部都在同一個(gè)地方就可以完成了。大部分的搜尋引擎接口都很笨重，一個(gè)又一個(gè)的超鏈接將使用者一次又一次地帶離原本開始搜尋的頁面。在我們想象中的彈跳窗口搜尋接口，使用者完全不會離開原有的畫面，而且永遠(yuǎn)只需要點(diǎn)一下便可立刻回到原本的主窗口畫面。

　　我曾經(jīng)在網(wǎng)上看過一些窗口內(nèi)容卷動范例，在范例中我使用document.body.scrollHeight或者document.height的地方改用一個(gè)隨便決定的很大的數(shù)字來代替。這種做法并不很好，因?yàn)樵谶@種狀況下，當(dāng)窗口內(nèi)容卷動到最底端的時(shí)候，如果使用者不移動光標(biāo)的話，那么y坐標(biāo)的值就會持續(xù)地繼續(xù)增加。這樣一來當(dāng)使用者按下向上卷動的箭頭按鈕的時(shí)候，頁面內(nèi)容卻還是不會立刻開始往上卷動，因?yàn)楹瘮?shù)還在繼續(xù)將窗口內(nèi)容向下卷動，直到達(dá)到程序里面設(shè)定的值才會停止。

　　scrollMe() 函數(shù)在onMouseOver事件發(fā)生的時(shí)候被呼叫，另一個(gè)stopMe()函數(shù)則相對應(yīng)地在onMouseOut事件發(fā)生時(shí)開始執(zhí)行：

function stopMe() {
clearTimeout(when);
}

　　同一個(gè)函數(shù)也可以用來停止向上卷動。

　　讓內(nèi)容向上卷動所用的函數(shù)和向下卷動非常類似：

function rollMe() {
if (y ＞= 0) {
ps.scroll(0,y)
y =y- 4;
when = setTimeout(‘rollMe()’,1);
}
}

　　rollMe() 函數(shù)首先檢查變量y是否大于或等于0。如果成立，scrollee 分割窗口便會往上卷動4個(gè)像素。正如同scrollMe() 函數(shù)一樣，變量when用來讓網(wǎng)頁內(nèi)容每隔一毫秒便重復(fù)向上卷動4個(gè)像素。

　　下面這個(gè)函數(shù)可以讓網(wǎng)頁內(nèi)容直接卷動到最上方：

function topMe() {
ps.scroll(0,0);
y= 0;
}

　　如果你在 topMe() 函數(shù)里面不重新設(shè)定變量y的值成為 0，那么當(dāng)你往下或者往上卷動的時(shí)候，頁面內(nèi)容會直接跳回你呼叫 topMe() 之前所在的位置去。

　　下面這個(gè)函數(shù)可以把窗口內(nèi)容直接卷動到最底端：

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)容卷動功能最能發(fā)揮功用的地方應(yīng)該是在使用CSSP設(shè)定的時(shí)候。然而要銘記在心的是，你可以使用類似的技巧來卷動其它窗口的內(nèi)容，或者用來控制內(nèi)容卷動的目的地。

　　5、 動態(tài)移動的窗口特效

　　在一些網(wǎng)站里如：天極網(wǎng)等，它的有的子窗口會不時(shí)自己移動，飄來飄去，很特別。會自己移動位置的窗口便顯得不僅僅是酷，而是更有實(shí)際上的功能了，動態(tài)改變窗口位置能夠讓網(wǎng)頁設(shè)計(jì)者重新安排窗口位置以便達(dá)到最佳的信息顯示方式。
移動窗口位置的程序代碼看起來和改變窗口尺寸非常相似：

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 對象的moveBy() 函數(shù)讓使用者把窗口移動到某個(gè)位置，然后再移回原處。moveBy() 和 moveTo() 方法的差異在于前者的移動位置是相對性的，而后者移動位置采用的是絕對坐標(biāo)。