es6 动画——迹忆客-ag捕鱼王app官网

javascript 提供了以下在动画程序中经常使用的函数。

• settimeout(function, duration) - 此函数在从现在开始持续时间毫秒后调用该函数。
• setinterval(function, duration) - 此函数在每 duration 毫秒后调用该函数。
• cleartimeout(settimeout_variable) - 此函数清除由 settimeout() 函数设置的任何计时器。

javascript 还可以设置 dom 对象的许多属性，包括它在屏幕上的位置。 我们可以设置对象的 top 和 left 属性以将其定位在屏幕上的任意位置。 以下是相同的语法。

// 设置距屏幕左边缘的距离。
object.style.left = distance in pixels or points;    
// 或者
// 设置与屏幕顶部边缘的距离。 
object.style.top = distance in pixels or points;

手动动画

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

我们使用 javascript 函数 getelementbyid() 获取 dom 对象，然后将其分配给全局变量 imgobj。

我们定义了一个初始化函数 init() 来初始化 imgobj，我们已经设置了它的位置和左侧属性。

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

我们正在调用 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。 此链接是图片。
• onmouseover 事件处理程序在用户的鼠标移到链接上时触发，而 onmouseout 事件处理程序在用户的鼠标移离链接（图像）时触发。
• 当鼠标移到图像上时，http 图像从第一个图像变为第二个图像。 当鼠标离开图像时，显示原始图像。
• 当鼠标离开链接时，初始图像 html.gif 将重新出现在屏幕上。

 
    
       
       
    
    
      
move your mouse over the image to see the result