在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()這兩種方法沒什麼卵用,大家只需要了解即可。