特效窗口一網(wǎng)打盡

sj33cn — Mon, 27 Mar 2006 14:55:00 +0000

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

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

　　1、打開重疊窗口

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

　　在 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、動態(tài)改變窗口尺寸

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

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

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

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

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

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

　　1、打開重疊窗口

　　下面的程序代碼示范由A窗口里面打開B窗口：

　　2、動態(tài)改變窗口尺寸

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

　　注：當(dāng)onClick事件發(fā)生的時候，子窗口的寬度與高度便會增加或者減少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;
}
}
}

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

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

function stopMe() {
clearTimeout(when);
}

　　同一個函數(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個像素。正如同scrollMe() 函數(shù)一樣，變量when用來讓網(wǎng)頁內(nèi)容每隔一毫秒便重復(fù)向上卷動4個像素。

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

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

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

　　下面這個函數(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è)定的時候。然而要銘記在心的是，你可以使用類似的技巧來卷動其它窗口的內(nèi)容，或者用來控制內(nèi)容卷動的目的地。

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

　　在一些網(wǎng)站里如：天極網(wǎng)等，它的有的子窗口會不時自己移動，飄來飄去，很特別。會自己移動位置的窗口便顯得不僅僅是酷，而是更有實(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;
}
}
}

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

无码人妻丰满熟妇啪啪,红杏亚洲影院一区二区三区,亚洲国产精品线久久

特效窗口一網(wǎng)打盡