script.aculo.us 挤压效果

在本文中，我们将通过使用名为script.aculo.us的 JavaScript 库来演示Squish效果，该库在左角保持静止的情况下平滑地缩小尺寸。我们也可以调整效果的持续时间。

句法：

Effect.Squish('id_of_element');

// Or

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

参数：

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

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

方法：

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

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

HTML

  

    
    
  
    
    
  
    
        function GFGSquish(el) {
            new Effect.Squish(el, { duration: 4 });
        }
    

  

    
          
        
  
        Click here to see the Squish effect 
    

  

输出：

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

HTML

  

    
    
      
    
    
  
    
        function GFGSquish(el) {
            new Effect.Squish(el, { duration: 3 });
        }
    

  

    
        
  
        
        
            Click here to see the effect
        
    

  

输出：