script.aculo.us - Highlight 高亮效果
说明
高亮效果用于通过更改目标元素的背景颜色来引起对其的注意。
如果没有任何选项，元素的背景颜色将变为黄色，然后在效果持续时间内变回原始背景颜色。
语法
您可以使用以下两种形式之一来使用此效果 −
new Effect.Highlight('id_of_element', [options]);
OR
new Effect.Highlight(element, [options]);
效果特定参数
除了通用参数之外，此效果还具有以下参数。
| Sr.No | 选项和说明 |
|---|---|
| 1 |
startcolor 设置元素背景的起始颜色。如果省略，则使用浅黄色。 |
| 2 |
endcolor 设置元素背景的结束颜色。如果省略，则在可以确定的情况下使用元素的原始背景颜色。否则，默认为白色。 |
| 3 |
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>
这种相当不协调的 Highlight 用法将元素的背景颜色更改为红色，然后在 8 秒内将背景颜色变为蓝色，同时显示一些有趣的紫色阴影。颜色变化完成后，元素的背景颜色将设置为绿色。
这将产生以下结果 −
scriptaculous_effects.html
