天天看点

用JS实现移动的窗口

很简单的,关键的我用红色标注了:

<html>

<head>

<title>移动的窗口</title>

<script language="javascript">

var timer;

var x = 0;

var y = 0;

function begin()

{

window.resizeTo(300, 200);//更改大小

timer = 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 >

<h3>可以移动的窗口</h3>

<hr>

<input type="button" value="开始" onclick="begin()">

<input type="button" value="停止" onclick="end()">

</div>

继续阅读