果冻
查看果冻的博客
| 金钱 | : 1294 |
| Level | : 0 |
| 发帖数 | : 181 |
| 最后登陆 | : 2008/1/16 |
| 注册时间 | : 2004/10/7 |
|
在JAVASCRIPT中，自动弹出窗口要算是最简单的“活”，只要懂得“OPEN”再加上一些修饰便立刻会打开一个美观大方的窗口。然而大家是否考虑过这样一个问题，能否让弹出的窗口逐渐变大，同时其内的文字或图片也随之慢慢地展开呢？（“哇噻，天方夜谭，不可能！”）好，今天就让笔者教大家一招：“渐变窗口”。
老规矩我们先来看一段JAVASCRIPT程序：
＜script language="JavaScript"＞
function windowslong(address,winName,features) //自定义窗口变量对象
{
windowschange=open(address,winName,features); //赋予自定义窗口变量对象以OPEN操作
for (var x=1;x＜=50;x++) //对窗口的宽度进行循环设置，使其在打开时逐渐变宽
{
windowschange.resizeBy(2,0); //窗口宽度循环次数
}
for (var x=1;x＜=70;x++)//对窗口的高度进行循环设置，使其在打开时逐渐变高
{
windowschange.resizeBy(0,1); //窗口高度循环次数
}
}
＜/script＞
这段程序的设计思路是：先建立一个窗口变量对象，接着对这个窗口变量中的尺寸通过循环语句进行设定，最后用“OPEN”和“resizeBy”操作属性加以实现。具体解释请看“//”后解释。
好了，渐变窗口程序已经全部奉上，各位是否觉得简单？（别忙着关书，还有文章要作。）
下面笔者将介绍如何使渐变窗口程序与网页代码结合起来，这可是重点呦！
＜html＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=gb2312"＞
＜title＞逐渐变化的窗口程序＜/title＞
＜script language="JavaScript"＞
function windowslong(address,winName,features) {
windowschange=open(address,winName,features);
for (var x=1;x＜=50;x++){
windowschange.resizeBy(2,0);
}
for (var x=1;x＜=70;x++){
windowschange.resizeBy(0,1);
}
}
＜/script＞
＜/head＞
＜body onload="windowslong('top.htm','jswindows','width=1,height=1')" bgcolor="#FFFFFF" ＞
＜a href="#" onClick="windowslong('top.htm','jswindows','width=1,height=1')"＞点击此处看看效果＜/a＞
＜/html＞
“渐变窗口程序”的实现必须与网页对应起来，也就是说程序中的“windowslong(address,winName,features)”变量对象本身是没有参数的，这段程序并没有意义。若要使这段程序有意义，实现渐变功能就需要在网页中予其附值。以onload="windowslong('top.htm','jswindows','width=1,height=1')"为例，笔者给“windowslong()”对象赋予“打开新建窗口的地址（同目录下top.htm窗口），名称（jswindows），以及原始宽度（1象素）和高度（1象素）”。这样一来，“渐变程序”在执行时，就会先找到这个top.htm窗口，再逐渐打开这个窗口。另外，这里还要注意一点，那就是原始宽度（1象素）和高度（1象素）的设置，不能超过5象素，否则就失去了程序的魅力。
看到这里我想各位一定会有一个问题，你用“渐变程序”打开的窗口到底有多大？嘻嘻，揭晓谜底：宽为100象素，高为70象素。怎么算？宽50×2×1；高70×1×1。至于数据从何而来，大家不妨自己推敲一下，给个提示，从“循环设置，循环次数以及原始尺寸”三方面着手。
“渐变窗口”是JAVASCRIPT对窗口运用的一场革命，它彻底改变了原先那枯燥的弹出动作（不信！哼，你贴到网页上看看，保证你会爱上它！），令人心旷神怡！（若诸位还有问题的话，可以EMAIL本人：dibazh@online.sh.cn ）
|
![[鍜界値鍚冧粈涔堣嵂]姣忓ぉ娉�2琚嬶紝鍧氭寔30澶╋紝鍜界値濂藉鍒�](http://www.shuyancha.com/images/syc.jpg)