16-js-缓冲运动 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  12.         #div1 {
  13.             width: 100px;
  14.             height: 100px;
  15.             background-color: red;
  16.             position: absolute;
  17.             left: 600px;
  18.             top: 50px;
  19.         }
  21.         #div2 {
  22.             width: 1px;
  23.             height: 300px;
  24.             position: absolute;
  25.             left: 300px;
  26.             top: 0;
  27.             background-color: black;
  28.         }
  29.     </style>
  30.     <script>
  31.         function startMove() {
  32.             var oDiv = document.getElementById(\'div1\');
  33.             setInterval(function () {
  35.                 var speed = (300 - oDiv.offsetLeft) / 10;
  36.                 //speed = Math.ceil(speed);//向上取整
  37.                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//判断是否大于0， 向上or向下取整；
  38.                 oDiv.style.left = oDiv.offsetLeft + speed + \'px\';
  39.                 document.title = oDiv.offsetLeft + \',\' + speed;
  40.             }, 30);
  41.         }
  42.     </script>
  43. </head>
  44. <body>
  45. <input type="button" value="开始运动" onclick="startMove()">
  46. <div id="div1"></div>
  47. <div id="div2"></div>
  48. </body>
  49. </html>






posted @ 2016-10-25 10:58  webfby  阅读(139)  评论(0)    收藏  举报