首页 > 网站 > WEB开发 > 正文

javascript基础:window对象的screen属性、移动窗口、缩放窗口

2024-04-27 15:04:34
字体:
来源:转载
供稿:网友

window对象的screen属性,也是一个对象,包含了关于屏幕的分辨率,以及可视的长宽。

通过window对象的moveTo,resizeTo 函数,可以指定浏览器程序在屏幕上显示的x、y坐标,以及窗口的长宽,moveBy和resizeBy函数是相对于当前浏览器位置做移动和变化。

另外,代码对Chrome浏览器和IE浏览器,进行分别处理。

最后通过window定时器实现了每隔0.5秒,自动变化窗口大小。

代码:

<!doctype html><html lang="en"> <head>  <meta charset="utf-8">  <title>Document</title>  <script language="javascript">        var interval;		var i = 1;	        //在chrome浏览器中,只有先open一个窗口,moveTo,resizeTo,moveBy,resizeBy函数才有效果				function openWinChrome()		{			//参数1,参数2都为空,并且第3个参数指定具体的属性,才会有弹出窗口			myWin= window.open("","","height=300,width=300");		}		//moveTo,resizeTo:绝对值		//moveBy,resizeBy:相对值		function maxWinChrome()		{			if(window.screen)			{				myWin.moveTo(0,0);				myWin.resizeTo(window.screen.availWidth,window.screen.availHeight);			}		}		function moveWinChrome()		{			myWin.moveBy(50,50);    //移动窗口			myWin.resizeBy(50,50);  //增大窗口		}		//IE能支持这些函数		function maxWinIE()		{			if(window.screen)			{				window.moveTo(0,0);				window.resizeTo(window.screen.availWidth,window.screen.availHeight);			}		}		function moveWinIE()		{			window.moveBy(150,150);   //移动窗口			window.resizeBy(10,10);     //增大窗口		}		//每隔0.5秒,窗口会变大或者变小		//以坐标位置650,300,长宽500为基础,计算出这个正方形的中心点坐标是900,550		//如果变大之后的长宽是600,那么坐标点就是600,250		function varyWinIE()		{			if(i == 1)			{				i = 2;				window.moveTo(650,300);				window.resizeTo(500,500);			}			else if(i == 2)			{				i = 1;				window.moveTo(600,250);				window.resizeTo(600,600);			}					}		function ss()		{			interval = setInterval("varyWinIE()",500)		}  </script> </head> <body>	<form>		<input type="button" value="打开窗口(chrome)" onclick="openWinChrome()">		<input type="button" value="最大化窗口(chrome)" onclick="maxWinChrome()">		<input type="button" value="移动窗口(chrome)" onclick="moveWinChrome()"><hr>		<input type="button" value="最大化窗口(IE)" onclick="maxWinIE()">		<input type="button" value="移动窗口" onclick="moveWinIE()">		<input type="button" value="变化窗口" onclick="ss()">		<input type="button" value="停止变化窗口" onclick="clearInterval(interval);">	</form>	<script language="Javascript">		document.write("<hr>屏幕分辨率:" + window.screen.width+ "*" + window.screen.height);		document.write("<hr>屏幕视野:" + window.screen.availWidth+ "*" + window.screen.availHeight);		document.write("<hr>色彩数:" + window.screen.colorDepth);		document.write("<hr>浏览器程序左边页边距的坐标:" + window.screenLeft);		document.write("<hr>浏览器程序上边页边距的坐标:" + window.screenTop);	</script>   </body></html>


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表