返回首页 常用 JavaScript 网页特效

动态显示窗口

实例说明

在打开窗口时,将窗口设置为最小的宽度,并使窗口的高度逐渐增加,当窗口的高度与屏幕的高度一致时,使窗口的宽度不断增加,直到与屏幕的宽度相一致。

技术要点

本实例主要应用了 screen 对象的 availWidth 和 availHeight 属性获得当前屏幕的宽度和高度,并使用 resizeTo()方法来自动增加窗口的高度和宽度。

实现过程

实现功能主页面 index.html

<html>  
<head>  
    <title></title>  
    <script language="JavaScript">  
        function pp()  
        {  
            alert("1");  
            var heightspeed = 2;  
            var widthspeed = 7;  
            var leftdist = 0;  
            var topdist = 0;  
            var winwidth = window.screen.availWidth - leftdist;  
            var winheight = window.screen.availHeight - topdist;  
            for (var sizeheight = 1; sizeheight < winheight; sizeheight += heightspeed)  
            {  
                self.resizeTo("1", sizeheight);  
            }  
            for( var sizewidth = 1;sizewidth<winwidth;sizewidth+=widthspeed)  
            {  
                self.resizeTo(sizewidth, sizeheight);  
            }  
        }  

    </script>  
</head>  
    <body onload="pp()"></body>  
</html>