moveBy & moveTo 的用法

一、moveBy()

　　1.moveBy() 方法可相对窗口的当前坐标把它移动指定的像素(相对定位)

　　2.moveBy(x,y)参数：
　　　　x：水平方向上的移动，值为正数，向右移动，值为负数，向左移动
　　　　y：垂直方向上的移动，值为正数，向下移动，值为负数，向上移动

　　注：出于安全方面的原因，浏览器限制此方法使其不能把窗口移出屏幕

　　3.例：

　　在html中设定按钮，并绑定对应的函数：

　　<input type="button" value="移动窗口（右）" onclick="moveWinR()" />
　　<input type="button" value="移动窗口（左）" onclick="moveWinL()" />
　　<br>
　　<br>
　　<input type="button" value="移动窗口（下）" onclick="moveWinD()" />
　　<input type="button" value="移动窗口（上）" onclick="moveWinU()" />
　　<br>
　　<br>
　　<input type="button" value="移动窗口（右下）" onclick="moveWinRD()" />
　　<input type="button" value="移动窗口（左上）" onclick="moveWinLU()" />
　　<br>
　　<br>
　　<input type="button" value="移动窗口（左下）" onclick="moveWinLD()" />
　　<input type="button" value="移动窗口（右上）" onclick="moveWinRU()" />

　　如图：

　　在JavaScript中创建新窗口：

var myWindow=window.open('','','width=200,height=100');//在此处的第二个参数中设置本地图片时，创建的新窗口将无法移动！

　　编写按钮绑定好的函数：　

　　//左右
　　function moveWinR(){
　　　　myWindow.moveBy(100,0);//向右
　　　　myWindow.focus();//focus() 方法可把键盘焦点给予一个窗口。
　　}
　　function moveWinL(){
　　　　myWindow.moveBy(-100,0);//向左
　　myWindow.focus();
　　}

　　//上下
　　function moveWinD(){
　　　　myWindow.moveBy(0,100);//向下
　　　　myWindow.focus();
　　}
　　function moveWinU(){
　　myWindow.moveBy(0,-100);//向上
　　myWindow.focus();
　　}

　　//对角移动
　　function moveWinRD(){
　　　　myWindow.moveBy(100,100);//右下
　　　　myWindow.focus();
　　}
　　function moveWinLU(){
　　　　myWindow.moveBy(-100,-100);//左上
　　　　myWindow.focus();
　　}
　　function moveWinLD(){
　　　　myWindow.moveBy(-100,100);//左下
　　　　myWindow.focus();
　　}
　　function moveWinRU(){
　　　　myWindow.moveBy(100,-100);//右上
　　　　myWindow.focus();
　　}

二、moveTo()

　　1.moveTo() 方法可把窗口的左上角固定到一个指定的坐标(绝对定位)
　　2.moveBy(x,y)参数：
　　　　x：水平方向上的定位，值为正数，新窗口距离左侧x个像素值
　　　　y：垂直方向上的定位，值为正数，新窗口距离顶端侧y个像素值

　　注：出于安全方面的原因，浏览器限制此方法使其不能把窗口移出屏幕，所以该方法设置x或y为负值时，相对应方向上的新定位不变

　　3.例：

　　在html中设定按钮，并绑定对应的函数：

　　<input type="button" value="左上角" onclick="moveWinTLU()" />
   <input type="button" value="右上角" onclick="moveWinTRU()" />
   <br>
   <br>
   <input type="button" value="左下角" onclick="moveWinTLD()" />
   <input type="button" value="右下角" onclick="moveWinTRD()" />
   <input type="button" value="居中" onclick="moveWinTZ()" />

　　如图：

　　编写绑定好的函数：

　　function moveWinTLU(){
       myWindow.moveTo(100,100);
       myWindow.focus();
   }
   function moveWinTRU(){
       myWindow.moveTo(1000,100);
       myWindow.focus();
   }
   function moveWinTLD(){
       myWindow.moveTo(100,500);
       myWindow.focus();
   }
   function moveWinTRD(){
       myWindow.moveTo(1000,500);
       myWindow.focus();
   }
   function moveWinTZ(){
       // myWindow.moveTo((window.innerWidth-myWindow.innerWidth)/2,(window.innerHeight-myWindow.innerHeight)/2);
       myWindow.moveTo((screen.width-myWindow.innerWidth)/2,(screen.height-myWindow.innerHeight)/2);
       myWindow.focus();
   }

三、moveTo和moveBy的相同点和区别

　　1.相同点：
　　　　1）均能对新建的窗口的位置进行改变
　　　　2）均被浏览器限制，使其不能把窗口移出屏幕
　　2.区别：
　　　　1）取值：
　　　　　　moveBy可以取正、负值
　　　　　　moveTo一般只取正值
　　　　2）参照位置：
　　　　　　moveBy以窗口的当前位置做为参照
　　　　　　moveTo以窗口的屏幕作为父级参照
　　　　3）功能：
　　　　　　moveBy是对窗口进行移动
　　　　　　moveTo是对窗口进行定位
　　　　4）定位

　　　　　　moveBy是相对定位

　　　　　　moveTo是绝对定位

四、完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>moveBy & moveTo</title>
    <link rel="stylesheet" href="">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #wrap{
            width: 300px;
            height: 240px;
            margin: 50px auto 0;
            border: 1px solid black;
            text-align: center;
        }
        #wrap1{
            width: 300px;
            height: 180px;
            margin: 0 auto;
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <br>
        <p>距离移动</p>
        <br>
        <input type="button" value="移动窗口（右）" onclick="moveWinR()" />
        <input type="button" value="移动窗口（左）" onclick="moveWinL()" />
        <br>
        <br>
        <input type="button" value="移动窗口（下）" onclick="moveWinD()" />
        <input type="button" value="移动窗口（上）" onclick="moveWinU()" />
        <br>
        <br>
        <input type="button" value="移动窗口（右下）" onclick="moveWinRD()" />
        <input type="button" value="移动窗口（左上）" onclick="moveWinLU()" />
        <br>
        <br>
        <input type="button" value="移动窗口（左下）" onclick="moveWinLD()" />
        <input type="button" value="移动窗口（右上）" onclick="moveWinRU()" />
    </div>
    
    <div id="wrap1">
        <br>
        <p>固定点移动</p>
        <br>
        <input type="button" value="左上角" onclick="moveWinTLU()" />
        <input type="button" value="右上角" onclick="moveWinTRU()" />
        <br>
        <br>
        <input type="button" value="左下角" onclick="moveWinTLD()" />
        <input type="button" value="右下角" onclick="moveWinTRD()" />
        <input type="button" value="居中" onclick="moveWinTZ()" />
    </div>
    
    <script>
        var myWindow=window.open('','','width=200,height=100');

        //moveBy() 方法可相对窗口的当前坐标把它移动指定的像素(相对定位)
            //moveBy(x,y)参数：
                    //x：水平方向上的移动，值为正数，向右移动，值为负数，向左移动
                    //y：垂直方向上的移动，值为正数，向下移动，值为负数，向上移动

            //注：出于安全方面的原因，浏览器限制此方法使其不能把窗口移出屏幕
        
        //例
        
        // var you = document.getElementById('you');
        // you.onclick=function () {
        //     myWindow.moveBy(100,0);//向右
        //     // myWindow.focus();//focus() 方法可把键盘焦点给予一个窗口
        // }
        //左右
        function moveWinR(){
            myWindow.moveBy(100,0);//向右
            myWindow.focus();//focus() 方法可把键盘焦点给予一个窗口。
        }
        function moveWinL(){
            myWindow.moveBy(-100,0);//向左
            myWindow.focus();
        }

        //上下
        function moveWinD(){
            myWindow.moveBy(0,100);//向下
            myWindow.focus();
        }
        function moveWinU(){
            myWindow.moveBy(0,-100);//向上
            myWindow.focus();
        }

        //对角移动
        function moveWinRD(){
            myWindow.moveBy(100,100);//右下
            myWindow.focus();
        }
        function moveWinLU(){
            myWindow.moveBy(-100,-100);//左上
            myWindow.focus();
        }
        function moveWinLD(){
            myWindow.moveBy(-100,100);//左下
            myWindow.focus();
        }
        function moveWinRU(){
            myWindow.moveBy(100,-100);//右上
            myWindow.focus();
        }

        //moveTo() 方法可把窗口的左上角固定到一个指定的坐标(绝对定位)
            //moveBy(x,y)参数：
                    //x：水平方向上的定位，值为正数，新窗口距离左侧x个像素值
                    //y：垂直方向上的定位，值为正数，新窗口距离顶端侧y个像素值

            //注：出于安全方面的原因，浏览器限制此方法使其不能把窗口移出屏幕，所以该方法设置x或y为负值时，相对应方向上的新定位不变
        function moveWinTLU(){
            myWindow.moveTo(100,100);
            myWindow.focus();
        }
        function moveWinTRU(){
            myWindow.moveTo(1000,100);
            myWindow.focus();
        }
        function moveWinTLD(){
            myWindow.moveTo(100,500);
            myWindow.focus();
        }
        function moveWinTRD(){
            myWindow.moveTo(1000,500);
            myWindow.focus();
        }
        function moveWinTZ(){
            // myWindow.moveTo((window.innerWidth-myWindow.innerWidth)/2,(window.innerHeight-myWindow.innerHeight)/2);
            myWindow.moveTo((screen.width-myWindow.innerWidth)/2,(screen.height-myWindow.innerHeight)/2);
            myWindow.focus();
        }

        //moveTo和moveBy的相同点和区别

            //相同点：
                //1.均能对新建的窗口的位置进行改变
                //2.均被浏览器限制，使其不能把窗口移出屏幕
            //区别：
                //1.取值：
                    //moveBy可以取正、负值
                    //moveTo一般只取正值
                //2.参照位置：
                    //moveBy以窗口的当前位置做为参照
                    //moveTo以窗口的屏幕作为父级参照
                //3.功能：
                    //moveBy是对窗口进行移动
                    //moveTo是对窗口进行定位
                //4.//moveBy是相对定位
                    //moveTo是绝对定位
    </script>
</body>
</html>

posted on 2020-09-20 19:28 欧阳若灵阅读(1122) 评论(0) 收藏举报