返回首页 常用 JavaScript 网页特效

慢慢放大的窗口

实例说明

本实例实现在窗口打开时,将窗口安装指定的大小放在屏幕中间,并使窗口不断放大,直到窗口大小与屏幕大小相同为止。

技术要点

本实例主要应用 screen 对象的 availWidth 和 availHeight 属性来获取屏幕工作区域的宽度和高度,并用 window 对象的 resizeTo()方法来指定窗口的位置,用 window 对象的 moveTo 方法使窗口不断变大。

实现过程

实现功能主页面

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8"/>  
    <title></title>  
    <script type="text/javascript">  
    var sun = 400;  
    var screenW = window.screen.availWidth;  
    var screenH = window.screen.availHeight;  
    var initialW = screenW-sun;  
    var initialH = screenH-sun;  
    window.resizeTo(initialW,initialH);   
    var x = sun/2;  
    var y = sun/2;  
    window.moveTo(x,y);  
    var timer;  
    function blow()  
    {  
        if(initialH<(window.screen.height-30))  
        {  
            initialW = initialW+2;  
            initialH = initialH+2;  
            window.resizeTo(initialW,initialH);  
            timer = setTimeout("blow()",50);  
            x=x-1;  
            y=y-1;  
            window.moveTo(x,y);  
        }  
        else  
        {  
            window.clearTimeout(timer);  
        }  
    }  
    </script>  
</head>  
<body onload="blow()">  
</body>  
</html>  
上一篇: 动态显示窗口 下一篇: 下降式浏览器