特效窗口一网打尽

　　对于一个购物网站来说，使用多窗口设计可能很有用，访客可能会发现自己机灵地穿梭在一个琳琅满目的商品网站里面，或者对于一个专业性技术网站则刚好相反，访客会觉得他们进入了一个复杂无比漩涡之中。在这里面，我大家介绍五则JavaScript制作的窗口特效，希望对你有所帮助，能好好利用。阅读本文之前，你必须对JavaScript有一定的认识。

　　注：这些特效，必须使用Internet Explorer 4.0 以上的浏览器。

　　1、打开重叠窗口

　　你在访问一些网站时，可能遇到过这样一种情况：当你打开站首页时，就有几个小窗口重叠出现，让人有点眼花。这样设计的好处是：如果主页面会打开两个子窗口。第一个子窗口可以作为网站内容的显示区域，而第二个子窗口则可以用来当成导览工具列。这样一来，使用者可以直接把原来的主窗口关掉，网站设计者便可以完整地控制各个导览元素。

　　在 JavaScript 里面，如果我们在某个窗口A里面打开另一个窗口B，那么窗口A就成为窗口B的「母窗口（parent window）」或者说A窗口是B窗口的「打开者（opener）」。

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

＜script language="JavaScript"＞
＜!-
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）尺寸。

　　如果你要改变JavaScript 建立的窗口的尺寸，千万记得要在打开窗口的时候加上 resizable 关键词。如果你没加的话，你打开的这些窗口可是会动也不动。

　　改变窗口尺寸赋予网站设计者网站应用程序开发过程中所迫切需要的弹性。请想象一个搜寻引擎使用者接口，它会打开一个新窗口，里面纯粹只显示一个文字输入字段让使用者输入搜寻关键词。使用者有两种选择：开始搜寻以及高级搜寻。按下高级搜寻按钮，该窗口便会自动放大高度，显示出高级搜寻选项让使用者选择。如果使用者直接按下「开始搜寻」按钮，程序便会开始进行搜寻并且自动放大窗口宽度用来显示搜寻结果。这些全部都在同一个地方就可以完成了。大部分的搜寻引擎接口都很笨重，一个又一个的超链接将使用者一次又一次地带离原本开始搜寻的页面。在我们想象中的弹跳窗口搜寻接口，使用者完全不会离开原有的画面，而且永远只需要点一下便可立刻回到原本的主窗口画面。

　　3、画布模式窗口（Canvas-mode Windows）

　　画布模式窗口（Canvas-mode Windows）指的是不论屏幕尺寸以及分辨率为何，都能够占据整个屏幕范围的窗口。对于非常在意窗口尺寸的演示文稿来说，画布模式窗口提供了一个相当有用的环境。

　　至于窗口尺寸最多就只能放大多大？你可以使用两个变量来储存 screen 对象的 availWidth 与 availHeight 这两个性质的值设定。这两个性质会传回屏幕能够用来显示窗口的最大总宽度与高度。

var chasm = screen.availWidth;
var mount = screen.availHeight;
var kingy = null;
function nav_ie_Can() {
kingy = window.open('','k1','top=0,left=0,width=' + (chasm - 10) + ',height=' + (mount -
30));
}

　　chasm 与 mount 这两个变量用来在 nav_ie_Can() 函数里面设定画布模式窗口的宽度与高度。然而由于惯例上width（宽度）与height（高度）这两个性质并没有考虑到窗口的外框与标题列，因此我们必须大略减去窗口外框与标题列的宽度与高度。

　　4、卷动窗口特效

　　控制窗口卷动算是一个较少使用到的JavaScript 窗口功能，不过这一点可能会随着可卷动的图层内容的到来而有所改变。在下面我教你如何实作出内容卷动功能。

　　这个范例的程序代码很容易了解。让我们先看看向下卷动功能所使用的函数。

vary= 0;
var when = null;
var ps = parent.scrollee;
function scrollMe() {
if (document.all &&y＜ ps.document.body.scrollHeight ||y＜ ps.document.height) {
ps.scroll(0,y);
y=y+ 4;
when = setTimeout('scrollMe()',1);
}
}

　　scrollMe() 函数首先检查浏览器是否支持 document.all 性质（只有 IE 浏览器才支持这个性质），然后检查变量y的值是否小于scrollHeight性质，这个 IE 专属的性质会传回整个HTML页面所能卷动的总高度（以像素为单位）。另一方面，如果浏览器不支持 document.all 性质，该函数便会检查变量y的值是否小于document height性质，传回的值和IE里面的scrollHeight性质是相同的。当前述任一种状况成立的时候，scrollee这个分割窗口便会向下卷动4个像素。变量when很有效率地让该函数不断每隔一毫秒（千分之一秒）重复向下卷动4个像素的距离。最后的结果便是网页内容很流畅地向下卷动。

　　我曾经在网上看过一些窗口内容卷动范例，在范例中我使用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() 方法的差异在于前者的移动位置是相对性的，而后者移动位置采用的是绝对坐标。