您的位置：首页 > Web前端 > JavaScript

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

2017-02-04 11:31 966 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航