慢慢放大的窗口
实例说明
本实例实现在窗口打开时,将窗口安装指定的大小放在屏幕中间,并使窗口不断放大,直到窗口大小与屏幕大小相同为止。
技术要点
本实例主要应用 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>