如何在 JavaScript 中实现基本动画？

如要在 JavaScript 中实现基本动画，请使用 DOM 对象属性和 JavaScript。以下列表包含不同的 DOM 方法。

  • 我们使用 JavaScript 函数 getElementById() 来获取 DOM 对象，然后将其分配给全局变量 imgObj。
  • 我们定义了一个初始化函数 init() 来初始化 imgObj，其中我们必须设置其position 和 left 属性。
  • 我们在窗口加载时调用初始化函数。
  • 最后，我们正在调用 moveRight() 函数以将左距离增加 10 像素。你还可以将其设置为负值以将其移动到左侧。
<html>
   <head>
      <title>JavaScript Animation</title>
      <script>
         <!--
         var imgObj = null;
         function init() {
            imgObj = document.getElementById('myImage');
            imgObj.style.position= 'relative';
            imgObj.style.left = '0px';
         }
         function moveRight() {
            imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
         }
         window.onload =init;
         //-->
      </script>
   </head>
   <body>
      <form>
         <img id="myImage" src="/images/html.gif" />
         <p>Click button below to move the image to right</p>
         <input type="button" value="Click Me" onclick="moveRight();" />
      </form>
   </body>
</html>

更新于： 16-Jun-2020

104 次浏览

开启您的 职业生涯

完成课程，获得认证

开始
广告