特效窗口一網打盡

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

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

　　1、 打開重疊窗口

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

　　在 ja;vascript 里面，如果我們在某個窗口A里面打開另一個窗口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、 動態改變窗口尺寸

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

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

　　注：當onClick事件發生的時候，子窗口的寬度與高度便會增加或者減少200個像素。

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() 函數通過 window 對象的 resizeBy() 方法來讓使用者在兩種窗口尺寸之間自由切換。resizeBy() 與 resizeTo() 兩種方法之間的主要差別在于前者的尺寸設定是相對性（relative）的，而后者則是使用絕對（absolute）尺寸。

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

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

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

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

　　1、 打開重疊窗口

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

　　在 ja;vascript 里面，如果我們在某個窗口A里面打開另一個窗口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、 動態改變窗口尺寸

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

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

　　注：當onClick事件發生的時候，子窗口的寬度與高度便會增加或者減少200個像素。

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() 函數通過 window 對象的 resizeBy() 方法來讓使用者在兩種窗口尺寸之間自由切換。resizeBy() 與 resizeTo() 兩種方法之間的主要差別在于前者的尺寸設定是相對性（relative）的，而后者則是使用絕對（absolute）尺寸。

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

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

　　我曾經在網上看過一些窗口內容卷動范例，在范例中我使用document.body.scrollHeight或者document.height的地方改用一個隨便決定的很大的數字來代替。這種做法并不很好，因為在這種狀況下，當窗口內容卷動到最底端的時候，如果使用者不移動光標的話，那么y坐標的值就會持續地繼續增加。這樣一來當使用者按下向上卷動的箭頭按鈕的時候，頁面內容卻還是不會立刻開始往上卷動，因為函數還在繼續將窗口內容向下卷動，直到達到程序里面設定的值才會停止。

　　scrollMe() 函數在onMouseOver事件發生的時候被呼叫，另一個stopMe()函數則相對應地在onMouseOut事件發生時開始執行：

function stopMe() {
clearTimeout(when);
}

　　同一個函數也可以用來停止向上卷動。

　　讓內容向上卷動所用的函數和向下卷動非常類似：

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

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

　　下面這個函數可以讓網頁內容直接卷動到最上方：

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

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

　　下面這個函數可以把窗口內容直接卷動到最底端：

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;
}
} 

　　窗口內容卷動功能最能發揮功用的地方應該是在使用CSSP設定的時候。然而要銘記在心的是，你可以使用類似的技巧來卷動其它窗口的內容，或者用來控制內容卷動的目的地。

　　5、 動態移動的窗口特效

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

var x = 0;
function moveMe() {
if (x == 0) {
self.moveBy(200,200);
x = 1;
}
else {
if (x == 1) {
self.moveBy(-200,-200);
x = 0;
}
}
} 

　　在這個例子里面，moveMe() 函數使用 window 對象的moveBy() 函數讓使用者把窗口移動到某個位置，然后再移回原處。moveBy() 和 moveTo() 方法的差異在于前者的移動位置是相對性的，而后者移動位置采用的是絕對坐標。