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>
新闻热点
疑难解答