这种效果属于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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。