script.aculo.us 粉扑效果

在本文中，我们将通过使用名为script.aculo.us的 JavaScript 库来演示Puff的效果，该库具有从一个到另一个的平滑过渡。我们也可以调整效果的持续时间。

句法：

Effect.Puff('id_of_element');

Effect.Puff('id_of_element', { duration: 3 });

注意：要使用这个库，我们假设安装该库，然后在我们的程序中使用它。为此，您可以点击链接 http://script.aculo.us/downloads

方法：

为了演示这个函数的使用，我们编写了一小段代码。我们编写了一个名为PuffEffect()方法的小 JavaScript函数，它使用了这个库的Effect.Puff()方法。通过单击Click me to Puff the Out ，您将清楚地看到效果。

示例：要查看效果先安装库，然后在本地环境中打开该程序。

HTML

   
       
      
      
      
  
      
         function PuffEffect(element){
            new Effect.Puff(element, {duration:3});
         }
  
        function displayImage(element){
            new Effect.Appear(element,{duration:1, from:1.1, to:1.2});
         }
      
   
     
   
      
         Click me to display the image
      
      
           
      
       
       Click Image to Puff Out
     
   

输出：