script.aculo.us 收缩效果

在本文中，我们将通过使用名为script.aculo.us的 JavaScript 库将元素收缩到特定方向并在效果完成时隐藏来演示Shrink的效果。我们也可以调整效果的持续时间。

句法：

Effect.Shrink('id_of_element');

// 要么

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

// 要么

Effect.Shrink('id_of_element', { direction:'direction' });

参数：

• id_of_element：要应用效果的元素。
• 持续时间：此效果的持续时间。
• direction：要缩小的方向，默认为中心。

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

方法：

• 为了演示这个函数的使用，我们编写了一小段代码。我们在其中编写了一个名为ShrinkEffect()方法的小 JavaScript函数，它使用了这个库的Shrink()方法。
• 通过单击单击图像缩小，您将清楚地看到效果。

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

HTML

  

    
    
    
  
    
        function ShrinkEffect(element) {
            new Effect.Shrink(element, { duration: 4 });
        }
    

  

    
        
  
        Click here to see the Shrink effect
    

  

输出：

示例 2：在此示例中，我们使用效果的方向为“左下角”，并添加了一个按钮以显示效果。

HTML

  

    
    
    
  
    
        function ShrinkEffect(element) {
            new Effect.Shrink(element, { duration: 1 });
        }
    

  

    
        
        
          
        
            Click here to see the effect
        
    

  

输出：