天天看點

用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>

繼續閱讀