script.aculo.us庫是一個跨瀏覽器庫，旨在改善網站的用戶界麵。在本文中，我們將演示Highlight效果。此效果用於使元素以可自定義的顏色平滑突出顯示。我們也可以調整效果的持續時間。
用法:
Effect.Highlight( 'id_of_element', [options] )
或者
Effect.Highlight( element, [options] )
選項：它具有上述和以下所述的四個對象：
- startcolor:用於設置效果第一幀的顏色。默認值為”＃ffff99”。
- endcolor:用於設置效果最後一幀的顏色。默認值為“ #ffffff”。
- restorecolor:效果完成後，用於設置元素的背景色。默認值為元素的當前背景色。
- keepBackgroundImage:它用於設置是否保留元素上的任何背景圖像。
為了演示此函數的使用，我們編寫了一小段代碼。在其中，我們編寫了一個名為ShowEffect方法的小型JavaScript函數，該函數使用此庫的Highlight方法。下麵的示例演示了該方法。
範例1：
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
<script type="text/javascript">
function ShowEffect(element) {
// Using the Highlight effect with
// the base options of the
// Effect class
new Effect.Highlight(element, {
duration:1,
from:0,
to:1.0
});
}
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Highlight Effect</h2>
<button onclick="ShowEffect('hideshow')">
Click me to Highlight the line!
</button>
<br />
<br />
<div id="hideshow">
LINE TO HIGHLIGHT
</div>
</body>
</html>輸出：
範例2：
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
<script type="text/javascript">
function ShowEffect(element) {
// Using the Highlight effect with
// the startcolor and endcolor
// options of the effect
new Effect.Highlight(element, {
startcolor:'#ff0000',
endcolor:'#ffff00'
});
}
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Highlight Effect</h2>
<button onclick="ShowEffect('geeks_1')">
Click me to Highlight the line!
</button>
<br />
<br />
<div id="geeks_1">
GeeksforGeeks
</div>
</body>
</html>輸出：
相關用法
注：本文由純淨天空篩選整理自Jitender_1998大神的英文原創作品 script.aculo.us Highlight Effect。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。