script.aculo.us - Morph 变形效果

说明

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

此效果采用单个特定选项，名为 style。为方便起见，您可以通过三种方式表达目标样式定义 −

• 作为 CSS 类名。然后，元素将变形为此类名的样式规范。

• 作为内联样式规范(认为样式 = 属性值)。

• 作为 CSS 属性的哈希值。属性名称允许使用官方(基于连字符)和驼峰式(例如 borderStyle)语法。

注意 −元素的原始样式必须位于其样式属性中，而不是外部样式表中，以便 script.aculo.us 对其进行变形。

语法

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

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

效果特定参数

除了通用参数之外，此效果还具有以下参数。

示例

<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.html