JavaScript特效实例016-动态显示窗口

最新推荐文章于 2022-06-05 15:17:59 发布

迷茫的寻路者

最新推荐文章于 2022-06-05 15:17:59 发布

阅读量930

点赞数 1

分类专栏： JavaScript网页特效范例文章标签： javascript

本文链接：https://blog.csdn.net/yejinwei1220/article/details/45889361

版权

JavaScript网页特效范例专栏收录该内容

19 篇文章 0 订阅

订阅专栏

实例016 动态显示窗口

实例说明

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

技术要点

本实例主要应用了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 οnlοad="pp()"></body>
</html>

这样本实例就做好了。

迷茫的寻路者

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript特效实例016-动态显示窗口

实例016 动态显示窗口实例说明在打开窗口时，将窗口设置为最小的宽度，并使窗口的高度逐渐增加，当窗口的高度与屏幕的高度一致时，使窗口的宽度不断增加，直到与屏幕的宽度相一致。技术要点本实例主要应用了screen对象的availWidth和availHeight属性获得当前屏幕的宽度和高度，并使用resizeTo（）方法来自动增加窗口的高度和
复制链接

扫一扫