DIV CSS 佈局教程網

10.4 移動窗口
編輯:JavaScript基礎知識     

在JavaScript中,可以使用window對象的moveTo()方法或moveBy()方法來移動窗口。

一、moveTo()方法

在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。

二、moveBy()方法

語法:

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved