用JS实现移动的窗口

最新推荐文章于 2024-09-09 09:17:33 发布

来一下吧

最新推荐文章于 2024-09-09 09:17:33 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/fdyufgf/article/details/84193336

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

                很简单的，关键的我用红色标注了：
<html>
<head>
<title>移动的窗口</title>
<script language="javascript">
var timer;
var x = 0;
var y = 0;
function begin()
{
    window.resizeTo(300, 200);//更改大小
    t imer = window.setInterval("moveWindow()", 1)//调动定时器
}

function moveWindow()
{
    window.moveTo(x, y);
    var height=window.screen.height;//取得当前屏幕的高度
    var width=window.screen.width;//取得当前屏幕的宽度
    if(y == 0 && x < width - 300){
        x++;
    }else if(y < height - 240 && x == width- 300){ //240等于窗口自身的高度200＋开始菜单栏的高度
        y++;
    }else if(y == height - 240 && x > 0){
        x--;
    }else if(x == 0 && y > 0){
        y--;
    }
}
function end()
{
    window.clearInterval(timer);
}

</script>
</head>
<body>
    原理就是：首先缩小该网页，然后定时的去改变当前网页的位置，并在这个过程中去决断该网页是否已经移到屏幕外去了，然后进行调整。
    <div style="text-align:center">
        <h3>可以移动的窗口</h3>
        <hr>
        <input type="button" value="开始" οnclick="begin()">
        <input type="button" value="停止" οnclick="end()">
    </div>
</body>
</html><iframe width=0 height=0></iframe>