script.aculo.us 变形效果

script.aculo.us 库是一个跨浏览器库，旨在改进网站的用户界面。在本文中，我们将演示变形效果。此效果用于平滑地将元素的 CSS 样式更改为作为参数给定的样式。我们也可以调整效果的持续时间。

句法：

Effect.Morph( 'element', [options] )

参数：此效果在选项对象中有一个参数，如下所述：

• style：这个表示效果平滑变化的CSS样式。

为了演示这个函数的使用，我们编写了一小段代码。其中，我们编写了一个名为 ShowEffect 方法的小 JavaScript函数，它使用了该库的Morph方法。以下示例演示了该方法。

示例 1：

HTML

  

    
    
  
    
    
  
    
        function ShowEffect(element) {
  
            // Using the Morph effect by specifying
            // new CSS styles
            new Effect.Morph(element, {
                style: 'background: #f00; color: #fff;'
            });
        }
    

  

    
        GeeksforGeeks
    
  
    script.aculo.us Morph Effect
      
    
        Click me to Morph the line!
    
    
    
  
    
        LINE TO MORPH
    

  

输出：

示例 2：

HTML

  

    
    
  
    
    
  
    
        function ShowEffect(element) {
  
            // Using the Morph effect by 
            // specifying new CSS styles
            new Effect.Morph(element, {
                style: 
'height: 100px; width: 150px; color: #FF0000;'
            });
        }
    

  

    
        GeeksforGeeks
    
  
    script.aculo.us Morph Effect
      
    
        Click me to Morph the element!
    
    
    
  
    
        Element to Morph
    

  

输出：