用JS實現移動的視窗
阿新 • • 發佈：2018-12-22
很簡單的，關鍵的我用紅色標註了：
<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
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="開始" onclick="begin()">
<input type="button" value="停止" onclick="end()">
</div>
</body>
</html><iframe width=0 height=0></iframe>
<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
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="開始" onclick="begin()">
<input type="button" value="停止" onclick="end()">
</div>
</body>
</html><iframe width=0 height=0></iframe>