在本文中，我們將通過使用一個稱為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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。