JavaScript_窗口移动动画效果示例；

最新推荐文章于 2023-11-05 19:08:15 发布

cenyebao

最新推荐文章于 2023-11-05 19:08:15 发布

阅读量976

点赞数

分类专栏： JavaScript_23 文章标签： javascript animation function velocity button null

本文链接：https://blog.csdn.net/cenyebao/article/details/7279444

版权

JavaScript_23 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<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>
<hr>
<font size="1">
   Document: <i><script>
           // 页脚信息
           document.write(document.title);
       </script></i><br>
   URL: <i><script>document.write(document.URL);</script></i><br>
   LastUpdate: <i><script>document.write(document.lastModified);</script></i>
</font>

cenyebao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_窗口移动动画效果示例；

窗口移动动画 var bounce = { x: 0, y: 0, w: 200, h: 200, // Window position and size; dx: 5, dy: 5, // Window velocity(速度)_移动距离; inte
复制链接

扫一扫