各种页面常用的弹窗代码大全-展开式的弹出窗口

显示全部楼层 · 2024-9-23 12:47:34

展开式的弹出窗口

网页上的弹出窗口见得多了，但是没有什么很新颖的效果来显示其过程。你学完这个实例后你就会感觉并不是那么回事，可让你的弹出窗口也活动起来。
制作方法：
将下面的代码复制到<head>~</head>里:
复制内容到剪贴板
代码:

<script language=javascript>

function expandingWindow(website) {

var heightspeed = 2; // vertical scrolling speed (higher = slower)

var widthspeed = 7; // horizontal scrolling speed (higher = slower)

var leftdist = 0; // distance to left edge of window

var topdist = 0; // distance to top edge of window

var winwidth = window.screen.availWidth - leftdist;

var winheight = window.screen.availHeight - topdist;

var sizer = window.open("","","left=" + leftdist + ",top=" + topdist + ",width=200,height=200,scrollbars=yes");

for (sizeheight = 1; sizeheight < winheight; sizeheight += heightspeed) {

sizer.resizeTo("1", sizeheight);

}

for (sizewidth = 1; sizewidth < winwidth; sizewidth += widthspeed) {

sizer.resizeTo(sizewidth, sizeheight);

}

sizer.location = website;

}

</script>
复制代码

将下面的代码复制到<body>~</body>里：
复制内容到剪贴板
代码:

<a href="javascript:expandingWindow('/html/')">HTML特效</a>
复制代码

如何设置弹出窗口的大小：
本实例中默认的弹出窗口是全屏的大小，可能在制作过程并不需要这么大，所以您可以看看下面的方法具体来修改成您所需的大小，将第一步中的javascript中的：

var winwidth = window.screen.availWidth - leftdist;

var winheight = window.screen.availHeight - topdist;
复制代码

改成：

var winwidth = 300;　　　//300为弹出窗口的宽度

var winheight = 500; 　　　//500为弹出窗口的高度
复制代码