JavaScript提供了以下两个在动画程序中经常使用的功能。

• setTimeout( 函数，duration) -此函数从现在开始的持续时间毫秒后调用函数。

• 的setInterval(函数，持续时间) -该函数每隔几毫秒后调用函数。

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

JavaScript还可以设置DOM对象的许多属性，包括其在屏幕上的位置。您可以设置对象的top和left属性以将其放置在屏幕上的任何位置。这是它的语法。

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or

// Set distance from top edge of the screen.
object.style.top = distance in pixels or points; 

手动动画

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

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

• 我们定义了一个初始化函数init()来初始化imgObj ，在那里我们设置了它的位置和left属性。

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

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

例

请尝试以下示例。

      
      
   
   
      
      

         
         
Click button below to move the image to right
         
      
      
   

输出

自动化动画

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

在这里，我们添加了更多方法。所以让我们看看这里有什么新东西-

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

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

例

请尝试以下示例代码。

      
      
   
   
      
      

         
         
Click the buttons below to handle animation
         
         
      
      
   

鼠标事件进行翻转

这是一个显示鼠标事件的图像翻转的简单示例。

让我们看看在下面的示例中我们正在使用什么-

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

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

• src属性被分配了名为/images/html.gif的外部图像文件的名称。

• 同样，我们创建了image2对象，并在此对象中分配了/images/http.gif。

• ＃(井号)会禁用链接，以便浏览器在单击时不会尝试转到URL。该链接是图像。

• 当用户的鼠标移动到链路，而onmouseout事件处理程序被触发时该用户的从链路(图像)的距离的鼠标移动的onMouseOver触发事件处理程序。

• 当鼠标移到图像上时，HTTP图像从第一张图像更改为第二张图像。当鼠标移离图像时，将显示原始图像。

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

      
      
   
   
   
      
Move your mouse over the image to see the result