很簡單的,關鍵的我用紅色标注了:
<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>