script.aculo.us - 变形效果

描述

此效果将更改元素的 CSS 属性。它采用一组 CSS 属性，并逐渐将元素的相关样式值移动到这些目标。

此效果采用一个名为**样式**的特殊选项。出于便利，你可以用三种方式来表达你的目标样式定义 −

作为一个 CSS 类名。然后，元素将向该类名的样式规范转换。
作为一个内联样式规范（例如，样式 = 属性值）。
作为一个 CSS 属性哈希。属性名称允许使用官方（基于连字符）和骆驼式（例如，borderStyle）语法。

**注意** − 对于 script.aculo.us 要转换元素，该元素的原始样式必须保存在其样式属性中，而不得保存在外部样式表中。

语法

你可以使用以下两种形式之一来使用此效果 −

new Effect.Morph('id_of_element', [options]);
OR
new Effect.Morph(element, [options]);

特定于效果的参数

除了一般参数之外，此效果还有以下参数。

序号	选项和描述
1	样式元素的目标样式，使用标准 CSS 语法或哈希来编写。

示例

现场演示

<html>
   <head>
      <title>script.aculo.us examples</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects" ></script>
      
      <script type = "text/javascript">
         function MorphEffect(element){
            new Effect.Morph(element, 
               {
                  style:'background:#f00; color: #fff; '+' border: 20px solid #f88; font-size:2em', duration:0.8}
            );
         }
      </script>
   </head>
   
   <body>
      <div onclick = "MorphEffect(this)">
         Click me to see the result of Morph Method
      </div>
   </body>
</html>

这将产生以下结果 −

scriptaculous_effects.htm

打印页面