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

列印頁面