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>
新聞熱點
疑難解答