script.aculo.us - 突出效果

描述

突出效果用於透過改變目標元素的背景色來引起對它的注意。

如果沒有選項，元素的背景顏色會變為黃色，然後在效果持續時間內逐漸變回原來的背景顏色。

語法

您可以使用以下兩種形式之一來使用此效果 -

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

特定效果引數

除了通用引數外，此效果還有以下引數。

序號	選項和說明
1	startcolor 設定元素背景的起始顏色。如果省略，則使用淺黃色。
2	endcolor 設定元素背景的結束顏色。如果省略，則使用元素的原始背景顏色（如果可以確定）。否則，預設為白色。
3	restorecolor 設定效果完成後背景的最終顏色。

序號

選項和說明

startcolor

設定元素背景的起始顏色。如果省略，則使用淺黃色。

endcolor

設定元素背景的結束顏色。如果省略，則使用元素的原始背景顏色（如果可以確定）。否則，預設為白色。

restorecolor

設定效果完成後背景的最終顏色。

示例

即時演示

<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 HighlightEffect(element){
            new Effect.Highlight(element, 
               {
                  startcolor: "#ff0000",
                  endcolor: "#0000ff",
                  restorecolor: "#00ff00",
                  duration: 8 
               }
            )
         }
      </script>
   </head>
   
   <body>
      <div onclick = "HighlightEffect(this)">
         Click me to see the result of Highlight Method
      </div>
   </body>
</html>

這種相當刺眼的突出效果將元素的背景顏色變為紅色，然後在 8 秒內將背景顏色變為藍色，在此過程中顯示一些有趣的紫色色調。顏色變形完成後，元素的背景顏色變為綠色。

這將產生以下結果 -

scriptaculous_effects.htm

列印頁面