script.aculo.us库是一个跨浏览器库，旨在改善网站的用户界面。在本文中，我们将演示增长效应。此效果用于使元素从一个方向平滑过渡地生长。我们也可以调整效果的持续时间。
用法:
Effect.Grow( 'id_of_element', [options] )
或者
Effect.Grow( element, [options] )
选项：此选项对象具有上面提到的和下面描述的两个值：
- direction:此值指定元素增长的起点。值可以是“左上”，“右上”，“左下”或“右下”。默认值为‘center’。
- duration:此值以秒为单位指定效果的持续时间。默认值为1秒。
为了演示此函数的使用，我们编写了一小段代码。在其中，我们编写了一个名为ShowEffect方法的小型JavaScript函数，该函数使用此库的Grow方法。下面的示例演示了该方法。
范例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 Effect.Grow() method
// on the element with no options
new Effect.Grow(element);
}
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Grow Effect</h2>
<button onclick="ShowEffect('geeks_1')">
Click to Show the Effect
</button>
<br />
<br />
<div id="geeks_1">
<div style="background-color:lightgreen;">
GeeksforGeeks
</div>
</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 Effect.Grow() method
// on the element with the direction
// and duration sepcified
new Effect.Grow(element, {
direction:'top-left',
duration:5
});
}
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Grow Effect</h2>
<button onclick="ShowEffect('hideshow')">
Click to Show the Effect
</button>
<br />
<br />
<div id="hideshow">
LINE TO GROW
</div>
</body>
</html>输出：
相关用法
注：本文由纯净天空筛选整理自Jitender_1998大神的英文原创作品 script.aculo.us Grow Effect。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。