在本文中，我們將通過使用一個名為script.aculo.us的JavaScript庫來演示Blind Up的效果。 BlindUp效果為元素提供了平滑的盲目過渡。我們還可以調整此效果的持續時間。
用法:
Effect.BlindUp('id_of_element');
//或者
Effect.BlindUp('id_of_element', [options]);
選項：
- duration:使元素淡入的持續時間，默認值為1.0。
- scaleX:布爾值，默認為false。
- scaleY:布爾值，默認為true。
- scaleContent:布爾值，默認為true。
- scaleFromCenter:布爾值，默認為 錯誤的。
- scaleFrom:整數值默認為100。
- scaleMode:使用字符串值設置縮放模式，默認為“ box”。
- scaleTo:整數值默認為100。
注意：要使用此庫，我們應該先安裝該庫，然後在程序中使用它。為此，您可以點擊此鏈接http://script.aculo.us/downloads。
範例1：為了演示這種效果的使用，我們編寫了一小段代碼。在其中，我們編寫了一個名為ShowEffect方法的小型JavaScript函數，該函數使用此庫的BlindUp方法。通過單擊“單擊我以盲目的行”！ ，您會清楚地看到效果。
要查看效果，請先安裝該庫，然後在本地環境中打開此程序。
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = effects,controls">
</script>
<script type="text/javascript">
function ShowEffect(element) {
new Effect.BlindUp(element,
{ duration:1, from:0, to:1.0 });
}
</script>
</head>
<body>
<div onclick="ShowEffect('hideshow')">
<button type="button">
Click me to BlindUp the line!
</button>
</div>
<br><br>
<div id="hideshow">
LINE TO BLIND UP
</div>
</body>
</html>輸出：
範例2：
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = effects,controls">
</script>
<script type="text/javascript">
function ShowEffect(element) {
new Effect.BlindUp(element,
{ duration:1, from:0, to:1.0 });
}
</script>
</head>
<body>
<div onclick="ShowEffect('geeks_1')">
<button type="button">
Click me to ShowEffect!
</button>
</div>
<br><br>
<div id="geeks_1">
<div style="width:10%; height:10%;
background-color:green;">
Geeks For Geeks
</div>
</div>
</body>
</html>輸出：
相關用法
注：本文由純淨天空篩選整理自Jitender_1998大神的英文原創作品 script.aculo.us BlindUp Effect。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。