JavaScript – 动画

JavaScript – 动画

您可以使用JavaScript创建具有以下元素的复杂动画,但不限于以下元素-

  • 焰火效果
  • 淡入淡出效果
  • 滚入或滚出效果
  • 页面进入或退出效果
  • 对象移动效果

本教程提供了如何使用JavaScript创建动画的基本理解。

JavaScript可用于根据逻辑方程或函数的某种模式将许多DOM元素(<img />, <div>或任何其他HTML元素)移动到页面上。

JavaScript提供了以下两个函数,可在动画程序中频繁使用。

  • setTimeout( function, duration) - 此函数在 持续时间 毫秒后调用 function

  • setInterval(function, duration) - 此函数每隔 持续时间 毫秒调用一次 function

  • clearTimeout(setTimeout_variable) - 此函数调用清除由setTimeout()函数设置的任何计时器。

JavaScript还可以设置DOM对象的许多属性,包括其屏幕位置。您可以将对象的 topleft 属性设置为屏幕上的任何位置。以下是其语法。

//从屏幕左侧设置距离。
object.style.left = distance in pixels or points;

or

//从屏幕顶部设置距离。
object.style.top = distance in pixels or points;

手动动画

因此,让我们使用DOM对象属性和JavaScript函数实现一个简单的动画,如下所示。以下列表包含不同的DOM方法。

  • 我们使用JavaScript函数 getElementById() 获取DOM对象,然后将其分配给全局变量 imgObj

  • 我们定义了一个初始化函数 init() ,以初始化 imgObj ,在其中我们设置了其 位置left 属性。

  • 我们在窗口加载时调用初始化函数。

  • 最后,我们调用 moveRight() 函数以将左侧距离增加10像素。您还可以将其设置为负值以将其移动到左侧。

示例

尝试下面的示例。

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
         <!--
            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>单击下面的按钮向右移动图像</p>
         <input type = "button" value = "单击我" onclick = "moveRight();" />
      </form>      
   </body>
</html>

输出

JavaScript - 动画

自动动画

在上面的例子中,我们看到了如何使用 JavaScript 函数 setTimeout() ,使图像在每次单击时向右移动。我们可以通过使用 JavaScript 函数 setTimeout() 来自动化此过程,如下所示−

在这里我们添加了更多的方法。那么让我们看看这里有什么新东西−

  • moveRight() 函数调用 setTimeout() 函数来设置 imgObj 的位置。

  • 我们添加了一个新函数 stop() 来清除 setTimeout() 函数设置的计时器,并将对象设置为其初始位置。

示例

尝试以下示例代码。

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
         <!--
            var imgObj = null;
            var animate ;

            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';
               animate = setTimeout(moveRight,20);    // call moveRight in 20msec
            }
            function stop() {
               clearTimeout(animate);
               imgObj.style.left = '0px'; 
            }

            window.onload = init;
         //-->
      </script>
   </head>

   <body>   
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>Click the buttons below to handle animation</p>
         <input type = "button" value = "Start" onclick = "moveRight();" />
         <input type = "button" value = "Stop" onclick = "stop();" />
      </form>      
   </body>
</html>

鼠标事件的交互效果

下面是一个显示图片交互效果的简单示例。

让我们看看我们在下面的示例中使用了什么−

  • 在加载此页面时,’if’语句检查图像对象的存在性。如果图像对象不可用,则不执行此块。

  • Image() 构造函数创建和预加载名为 image1 的新图像对象。

  • 将 src 属性指定为外部图像文件的名称 /images/html.gif。

  • 同样,我们创建了 image2 对象,并在该对象中指定了 /images/http.gif。

  • # 号禁用链接,使浏览器在单击时不尝试转到 URL。此链接是一张图片。

  • onMouseOver 事件处理程序在用户的鼠标移动到链接上时触发, onMouseOut 事件处理程序在用户的鼠标从链接(即图片)上移开时触发。

  • 当鼠标移过图像时,HTTP 图像会从第一张变为第二张。当鼠标从图像移开时,将显示原始图像。

  • 当鼠标从链接移开时,初始图像 html.gif 将重新出现在屏幕上。

<html>
   <head>
      <title>Image Rollover</title>
   </head>

   <body>
      <!-- If you want the button centered on the page define the width below 
           and replace margin:0 auto; with margin-left:auto; margin-right:auto; -->
      <p style="text-align:center;">
         <a href="#" onMouseOver="document.image1.src='/images/http.gif'"
            onMouseOut="document.image1.src='/images/html.gif'">
            <img src="/images/html.gif" name="image1" border="0">
         </a>
      </p>      
   </body>
</html>
<html>

   <head>
      <title>使用鼠标事件制作鼠标悬停效果</title>

      <script type = "text/javascript">
         <!--
            if(document.images) {
               var image1 = new Image();     // 预加载图片
               image1.src = "/images/html.gif";
               var image2 = new Image();     // 预加载第二张图片
               image2.src = "/images/http.gif";
            }
         //-->
      </script>
   </head>

   <body>
      <p>将鼠标移到图片上查看效果</p>

      <a href = "#" onMouseOver = "document.myImage.src = image2.src;"
         onMouseOut = "document.myImage.src = image1.src;">
         <img name = "myImage" src = "/images/html.gif" />
      </a>
   </body>
</html>

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程