实例015 打开窗口特殊效果
实例说明
当点击页面打开连接时，在屏幕左上角会弹出一个窗口，并动态改变窗口的宽度和高度，当窗口的高度和屏幕高度一致时，继续添加窗口的宽度，直到与屏幕大小相同为止。
技术要点
本实例主要是应用window对象的open（）方法来打开一个已有的窗口，用screen对象的availHeight属性来获取屏幕可工作区域的高度，用moveTo（）和resizeTo（）方法来指定窗口的位置及大小，并用resizeBy（）方法使窗口逐渐变大，直到窗口大小与屏幕的工作区大小相同。下面对window对象的moveTo（）、resizeTo（）和resizeBy（）分发分别进行介绍。
（1）moveTo方法
<pre name="code" class="html"><pre name="code" class="html">window.moveTo(x,y)
参数说明。
x:窗口左上角的x坐标。
y:窗口左上角的y坐标。
功能：将窗口移动到指定坐标处。
（2）resizeTo（）方法
window.resizeTo(x,y)
参数说明如下。
x:窗口的水平宽度。
y:窗口的垂直宽度。
功能：将当期窗口改变成（x,y）大小，x,y分别为宽度和高度。
（3）resizeBy（）方法。
window.resizeBy(x,y)
参数说明如下。
x:放大或缩小的水平宽度。
y:放大或缩小的垂直宽度。
功能：将当前窗口改变到指定的大小（x,y），当x、y的值大于0是为扩大，小于0时为缩小。
实现过程
（1）弹出的窗口new.html
<html>
<head>
<meta charset="utf-8" />
<title>弹出的窗口</title>
<style type="text/css">
body{
background-image:url(new.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
</body>
</html>
(2)实现功能的主窗口index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript">
var winheight,winsize,x,win2;
function go1()
{
winheight = 100;
winsize = 100;
x = 5;
win2 = window.open("new.html","","scrollbars='no'");
win2.moveTo(0.0);
win2.resizeTo(100,100);
go2();
}
function go2()
{
if (winheight>=screen.avaiHeight-3)
{
x=0;
}
win2.resizeBy(5,x);
winheight+=5
winsize+=5;
if(winsize>=screen.width-5)
{
winheight=100;
winsize=100;
x=5;
return;
}
setTimeout("go2()",50);
}
</script>
</head>
<body>
<a href="javascript:go1()">打开</a>
</body>
</html>
这样本实例就做好了。
时间： 2024-10-20 11:42:56