在本文中，我们将通过使用一个名为script.aculo.us的JavaScript库来演示Blind Down的效果。 BlindDown效果为元素提供了平滑的盲过渡。我们还可以调整此效果的持续时间。
用法:
Effect.BlindDown('id_of_element');
//或者
Effect.BlindDown('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函数，该函数使用此库的BlindDown方法。通过单击“单击我以盲目的行”！ ，您会清楚地看到效果。
要查看效果，请先安装该库，然后在本地环境中打开此程序。
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.BlindDown(element,
{ duration:1, from:0, to:1.0 });
}
</script>
</head>
<body>
<div onclick="ShowEffect('geeks_1')">
<button type="button">
Click me to BlindDown the line!
</button>
</div>
<br><br>
<div id="geeks_1">
LINE TO BLIND DOWN
</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.BlindDown(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 BlindDown Effect。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。