在JavaScript中,可以使用window對象的moveTo()方法或moveBy()方法來移動窗口。
在JavaScript中,我們可以使用window對象中的moveTo()方法來將窗口移動到電腦屏幕指定坐標處。
語法:
moveTo(x,y);
說明:
x表示距離屏幕左上角的水平距離(x軸坐標);
y表示距離屏幕左上角的垂直距離(y軸坐標);
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> function resizeWindow() { window.resizeTo(200,200); } function moveWindow() { window.moveTo(0,0); } </script> </head> <body> <input type="button" value="改變大小" onclick="resizeWindow()"/> <input type="button" value="移動窗口" onclick="moveWindow()"/> </body> </html>
在浏覽器預覽效果如下:
分析:
我們首先點擊“改變大小”按鈕,使用window對象resizeTo()方法使得窗口寬度和高度都是200px。然後再點擊“移動窗口”,使用window對象moveTo()方法使得浏覽器窗口距離屏幕左上角水平方向和垂直方向距離都是0px。
語法:
window.moveBy(x, y)
說明:
x表示水平方向移動的距離,單位為px。當x>0時,窗口向右移動;當x<0時,窗口向左移動。
y表示垂直方向移動的距離,單位為px。當y>0時,窗口向下移動;當y<0時,窗口向上移動。
moveTo(x,y)與moveBy(x,y)不同在於,moveTo(x,y)中的x、y是“改變後”的數值,而moveBy(x,y)中的x、y是“增加或減少”的數值。“to”表示一個結果,“by”表示一個過程。這一點跟resizeTo()和resizeBy()方法類似。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> function resizeWindow() { window.resizeTo(200,200); } function moveWindow() { window.moveBy(-100,-100); } </script> </head> <body> <input type="button" value="改變大小" onclick="resizeWindow()"/> <input type="button" value="移動窗口" onclick="moveWindow()"/> </body> </html>
在浏覽器預覽效果如下:
分析:
我們首先點擊“改變大小”按鈕,使用window對象resizeTo()方法使得窗口寬度和高度都是200px。然後再點擊“移動窗口”,每點擊一次按鈕,窗口水平方向都會向左移動100px,而垂直方向都會向上移動100px。
說實話,由於兼容性不好,並且moveTo()和moveBy()這兩種方法沒什麼卵用,大家只需要了解即可。