這種效果屬於JavaScript的UI庫(稱為script.aculo.us)。 script.aculo.us是基於Prototype JavaScript Framework構建的JavaScript庫。該庫借助文檔對象模型(DOM)為我們提供了動態視覺效果。
現在，讓我們專門了解script.aculo.us搖動效果
震動效果會使目標圖像前後移動三下。讓我們來看看這種效果與HTML的實際實現。
用法:
new Effect.Shake('id_of_element', [options]);
OR
new Effect.Shake(element, [options]);
例：
<html>
<head>
<title>script.aculo.us Shake Effect</title>
<!-- Adding required scripts for Shake Effect -->
<script type="text/javascript"
src="/javascript/prototype.js"></script>
<script type="text/javascript"
src=
"/javascript/scriptaculous.js?load = effects">
</script>
<script type="text/javascript">
<!-- script.aculo.us - Shake Effect -->
function ShakeEffect(element){
new Effect.Shake(element);
}
</script>
</head>
<body>
<!-- HTML division with
id and onclick functionality-->
<div id="myimage" onclick="ShakeEffect(this);">
<img src="logo.jpg" alt="Screenshot" />
<h2>Click here to Shake element</h2>
</div>
</body>
</html>輸出：當您單擊該文本時，圖像將抖動。
相關用法
注：本文由純淨天空篩選整理自romilvishol大神的英文原創作品 script.aculo.us Shake Effect。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。