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

打印页面