<html>
<head>
<title>窗口移动动画</title>
<script type="text/javascript">
var bounce = {
x: 0, y: 0, w: 200, h: 200, // Window position and size;
dx: 5, dy: 5, // Window velocity(速度)_移动距离;
interval: 100, // 间隔100毫秒刷新;
win: null, // 存储创建的窗口;
timer: null, // Return value of setInterval();
// Start the animation;
start: function() {
// Start with the window in the center of the screen;
bounce.x = (screen.width-bounce.w)/2;
bounce.y = (screen.height-bounce.h)/2;
bounce.win = window.open('javascript:"<h1>BOUNCE!</h1>"', "", "left="+bounce.x+",top="+bounce.y+
",width="+bounce.w+",height="+bounce.h+",status=yes");
bounce.timer = setInterval(bounce.nextFrame, bounce.interval);
},
// Stop the animation;
stop: function() {
clearInterval(bounce.timer);
if(!bounce.win.closed) {
bounce.win.close();
}
},
// Display the next frame of the animation.
nextFrame: function() {
// If the user closed the window, stop the animation;
if(bounce.win.closed) {
clearInterval(bounce.timer);
return;
}
// Bounce if we have reached the right or left edge(边缘);
if((bounce.x+bounce.dx > (screen.availWidth-bounce.w)) || (bounce.x+bounce.dx<0)) {
bounce.dx = -bounce.dx;
}
// Bounce if we have reached the bottom or top edge;
if((bounce.y+bounce.dy > (screen.availHeight-bounce.h)) || (bounce.y+bounce.dy < 0)) {
bounce.dy = -bounce.dy;
}
// Update the current position of the window;
bounce.x += bounce.dx;
bounce.y += bounce.dy;
// Finally, move the window to the new position;
bounce.win.moveTo(bounce.x, bounce.y);
// Display current position in window status line;
bounce.win.defaultStatus = "(" + bounce.x + "," + bounce.y + ")";
}
};
</script>
</head>
<body>
<button οnclick="bounce.start()">开始移动窗口</button>
<button οnclick="bounce.stop()">停止移动窗口</button>
</body>
</html>
<head>
<title>窗口移动动画</title>
<script type="text/javascript">
var bounce = {
x: 0, y: 0, w: 200, h: 200, // Window position and size;
dx: 5, dy: 5, // Window velocity(速度)_移动距离;
interval: 100, // 间隔100毫秒刷新;
win: null, // 存储创建的窗口;
timer: null, // Return value of setInterval();
// Start the animation;
start: function() {
// Start with the window in the center of the screen;
bounce.x = (screen.width-bounce.w)/2;
bounce.y = (screen.height-bounce.h)/2;
bounce.win = window.open('javascript:"<h1>BOUNCE!</h1>"', "", "left="+bounce.x+",top="+bounce.y+
",width="+bounce.w+",height="+bounce.h+",status=yes");
bounce.timer = setInterval(bounce.nextFrame, bounce.interval);
},
// Stop the animation;
stop: function() {
clearInterval(bounce.timer);
if(!bounce.win.closed) {
bounce.win.close();
}
},
// Display the next frame of the animation.
nextFrame: function() {
// If the user closed the window, stop the animation;
if(bounce.win.closed) {
clearInterval(bounce.timer);
return;
}
// Bounce if we have reached the right or left edge(边缘);
if((bounce.x+bounce.dx > (screen.availWidth-bounce.w)) || (bounce.x+bounce.dx<0)) {
bounce.dx = -bounce.dx;
}
// Bounce if we have reached the bottom or top edge;
if((bounce.y+bounce.dy > (screen.availHeight-bounce.h)) || (bounce.y+bounce.dy < 0)) {
bounce.dy = -bounce.dy;
}
// Update the current position of the window;
bounce.x += bounce.dx;
bounce.y += bounce.dy;
// Finally, move the window to the new position;
bounce.win.moveTo(bounce.x, bounce.y);
// Display current position in window status line;
bounce.win.defaultStatus = "(" + bounce.x + "," + bounce.y + ")";
}
};
</script>
</head>
<body>
<button οnclick="bounce.start()">开始移动窗口</button>
<button οnclick="bounce.stop()">停止移动窗口</button>
</body>
</html>