在本文中，我们将通过使用一个称为script.aculo.us的JavaScript库来演示“收缩”的效果，该元素将元素收缩到特定方向并在效果完成时隐藏。我们也可以调整效果的持续时间。
用法:
Effect.Shrink('id_of_element');
//或者
Effect.Shrink('id_of_element', { duration:dur });
//或者
Effect.Shrink('id_of_element', { direction:'direction' });
参数：
- id_of_element:要在其上应用效果的元素。
- duration:此效果所花费的持续时间。
- direction:要缩小的方向，默认为中心。
注意：要使用此库，我们应该下载或安装该库，然后在我们的程序中使用它。为此，您可以点击此链接http://script.aculo.us/downloads。
方法：
- 为了演示此函数的使用，我们编写了一小段代码。在其中，我们编写了一个名为ShrinkEffect()方法的小型JavaScript函数，该函数使用此库的Shrink()方法。
- 通过单击单击图像以缩小，您将清楚地看到效果。
范例1：要查看效果，请先安装该库，然后在本地环境中打开以下程序。
HTML
<!DOCTYPE html>
<html>
<head>
<script src="prototype.js"></script>
<script src=
"scriptaculous.js?load = effects">
</script>
<script type="text/javascript">
function ShrinkEffect(element) {
new Effect.Shrink(element, { duration:4 });
}
</script>
</head>
<body>
<div id="myimage" onclick="ShrinkEffect(this);">
<img height=200px width=200px
src="gfg.png" alt="gfg logo" />
<h2>Click here to see the Shrink effect</h2>
</div>
</body>
</html>输出：
范例2：在此示例中，我们将效果的方向设为“左下”，并添加了一个按钮以使效果出现。
HTML
<!DOCTYPE html>
<html>
<head>
<script src="prototype.js"></script>
<script src=
"scriptaculous.js?load = effects">
</script>
<script type="text/javascript">
function ShrinkEffect(element) {
new Effect.Shrink(element, { duration:1 });
}
</script>
</head>
<body>
<div id="myimage" onclick="ShrinkEffect(this);">
<img height=200px width=200px
src="gfg.png" alt="gfg logo" />
<br><br>
<button onclick="ShrinkEffect('myimage');">
Click here to see the effect
</button>
</div>
</body>
</html>输出：
相关用法
注：本文由纯净天空筛选整理自parasmadan15大神的英文原创作品 script.aculo.us Shrink Effect。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。