码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-05-20 13:11:28      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:javascript

实例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>


这样本实例就做好了。


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

标签:javascript

原文地址:http://blog.csdn.net/yejinwei1220/article/details/45868823

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!