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

最新推荐文章于 2022-02-27 14:54:27 发布

LongRui888

最新推荐文章于 2022-02-27 14:54:27 发布

阅读量1.2k

点赞数

分类专栏：【Javascript与jQuery】

本文链接：https://blog.csdn.net/sqlserverdiscovery/article/details/54861938

版权

【Javascript与jQuery】专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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)" οnclick="openWinChrome()">
		<input type="button" value="最大化窗口(chrome)" οnclick="maxWinChrome()">
		<input type="button" value="移动窗口(chrome)" οnclick="moveWinChrome()"><hr>

		<input type="button" value="最大化窗口(IE)" οnclick="maxWinIE()">
		<input type="button" value="移动窗口" οnclick="moveWinIE()">
		<input type="button" value="变化窗口" οnclick="ss()">
		<input type="button" value="停止变化窗口" οnclick="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>

LongRui888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript基础：window对象的screen属性、移动窗口、缩放窗口

window对象的screen属性，也是一个对象，包含了关于屏幕的分辨率，以及可视的长宽。通过window对象的moveTo，resizeTo 函数，可以指定浏览器程序在屏幕上显示的x、y坐标，以及窗口的长宽，moveBy和resizeBy函数是相对于当前浏览器位置做移动和变化。另外，代码对chrome浏览器和IE浏览器，进行分别处理。最后通过window定时器实现了每隔0.5秒，自动
复制链接

扫一扫

专栏目录