打开窗口特殊效果

实例说明

当点击页面打开连接时，在屏幕左上角会弹出一个窗口，并动态改变窗口的宽度和高度，当窗口的高度和屏幕高度一致时，继续添加窗口的宽度，直到与屏幕大小相同为止。

技术要点

本实例主要是应用 window 对象的 open（）方法来打开一个已有的窗口，用 screen 对象的 availHeight 属性来获取屏幕可工作区域的高度，用 moveTo（）和 resizeTo（）方法来指定窗口的位置及大小，并用 resizeBy（）方法使窗口逐渐变大，直到窗口大小与屏幕的工作区大小相同。下面对 window 对象的 moveTo（）、resizeTo（）和 resizeBy（）分发分别进行介绍。

moveTo 方法

window.moveTo(x,y)

参数说明。

x:窗口左上角的x坐标。
y:窗口左上角的y坐标。

功能：将窗口移动到指定坐标处。

resizeTo（）方法

window.resizeTo(x,y)

参数说明如下。

x:窗口的水平宽度。
y:窗口的垂直宽度。

功能：将当期窗口改变成（x,y）大小，x,y 分别为宽度和高度。

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+=x;  
        winsize+=5;  
        if(winsize>=screen.width-5)  
        {  
            return;  
        }  
        setTimeout("go2()",50);  
    }  
    </script>  
</head>  
<body>  
    <a href="javascript:go1()">打开</a>  
</body>  
</html>