script.aculo.us 折叠效果

在本文中，我们将通过使用名为script.aculo.us的 JavaScript 库来演示Fold的效果，该库首先在垂直方向平滑缩小，然后向左水平缩小，最后消失。我们也可以调整效果的持续时间。

句法：

Effect.Fold('id_of_element');

// Or

Effect.Fold('id_of_element', { duration: dur });

参数：

• id_of_element：要应用效果的元素。
• 持续时间：此效果的持续时间。

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

方法：

• 为了演示这个函数的使用，我们编写了一小段代码。我们在其中编写了一个名为FoldEffect()方法的小 JavaScript函数，它使用了该库的Fold()方法。
• 通过单击单击此处查看折叠效果，您将清楚地看到效果。

例1：看效果先安装库，然后在本地环境中打开如下程序。

HTML

   

    
  
    
    
   
    
        function FoldEffect(element){
            new Effect.Fold(element, {duration:4});
        }
    

   

    
  
        
              
        Click here to see the Fold effect 
        

   

输出：

示例 2：在此示例中，我们更改了效果的持续时间，还添加了一个按钮来查看效果。

HTML

   

    
  
    
    
   
    
        function FoldEffect(element){
        new Effect.Fold(element, {duration:3});
        }
    

   

    
        
  
        
          
        
            Click here to see the effect
        
        

   

输出：