JavaScript特效实例015-打开窗口特殊效果

时间：2015-05-20 13:11:28 收藏：0 阅读：173

实例015 打开窗口特殊效果

实例说明

当点击页面打开连接时，在屏幕左上角会弹出一个窗口，并动态改变窗口的宽度和高度，当窗口的高度和屏幕高度一致时，继续添加窗口的宽度，直到与屏幕大小相同为止。

技术要点

本实例主要是应用window对象的open（）方法来打开一个已有的窗口，用screen对象的availHeight属性来获取屏幕可工作区域的高度，用moveTo（）和resizeTo（）方法来指定窗口的位置及大小，并用resizeBy（）方法使窗口逐渐变大，直到窗口大小与屏幕的工作区大小相同。下面对window对象的moveTo（）、resizeTo（）和resizeBy（）分发分别进行介绍。

（1）moveTo方法

<pre name="code" class="html"><pre name="code" class="html">window.moveTo(x,y)

参数说明。

x:窗口左上角的x坐标。

y:窗口左上角的y坐标。

功能：将窗口移动到指定坐标处。

（2）resizeTo（）方法

window.resizeTo(x,y)

参数说明如下。

x:窗口的水平宽度。

y:窗口的垂直宽度。

功能：将当期窗口改变成（x,y）大小，x,y分别为宽度和高度。

（3）resizeBy（）方法。

window.resizeBy(x,y)

参数说明如下。

x:放大或缩小的水平宽度。

y:放大或缩小的垂直宽度。

功能：将当前窗口改变到指定的大小（x,y），当x、y的值大于0是为扩大，小于0时为缩小。

实现过程

（1）弹出的窗口new.html

<html>
<head>
<meta charset="utf-8" />
<title>弹出的窗口</title>
<style type="text/css">
body{
	background-image:url(new.jpg);
	background-repeat:no-repeat;
	}
</style>
</head>
<body>
</body>
</html>

(2)实现功能的主窗口index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
	<title></title>
	<script type="text/javascript">
	var winheight,winsize,x,win2;
	function go1()
	{
		winheight = 100;
		winsize = 100;
		x = 5;
		win2 = window.open("new.html","","scrollbars='no'");
		win2.moveTo(0.0);
		win2.resizeTo(100,100);
		go2();
	}
	function go2()
	{
		if (winheight>=screen.avaiHeight-3) 
		{
			x=0;
		}
		win2.resizeBy(5,x);
		winheight+=5
		winsize+=5;
		if(winsize>=screen.width-5)
		{
			winheight=100;
			winsize=100;
			x=5;
			return;
		}
		setTimeout("go2()",50);
	}
	</script>
</head>
<body>
	<a href="javascript:go1()">打开</a>
</body>
</html>

这样本实例就做好了。