Script.aculo.us 简明教程

script.aculo.us - Visual Effects

script.aculo.us 效果分为两组 −

Core Effects

以下六个核心效果是 script.aculo.us Visual Effects JavaScript 库的基础。

所有核心效果均支持各种常见参数和特有效果参数,这些效果名称区分大小写。

本教程详细讨论了所有特有 Common Parameters 和效果。

Combination Effects

所有组合效果均基于五个核心效果,被视为允许编写自己效果的示例。

通常,这些效果依赖于其他效果的并行、同步执行。这种执行非常方便,因此创建 eigene 组合效果很容易。以下是组合效果的列表 −

此外,还有 Effect.toggle 实用方法,可用于想要临时显示元素,并带出现/淡入淡出、滑动或盲目的效果。

Library Files Required for Effects

为了使用 script.aculo.us 的效果功能,你需要加载 effects 模块。因此,面向 script.aculo.us 的最小加载看上去如下:

<html>
   <head>
      <title>script.aculo.us effects</title>
      <script type = "text/javascript"  src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/"effects.j"></script>
   </head>

   <body>
      ...
   </body>
</html>

Call Effect Functions

启动核心效果的正确方法通常是使用 new 运算符。根据偏好,你可以使用两种语法之一 −

Syntax

new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect('EffectName' [, requiredArgs ] [,options])

这两条语法在技术上是等价的。在两者之间的选择主要取决于你个人的代码美学感。

Example

以下是两个等价的调用,让你看到语法之间的关系,它们都是可互换的 −

new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });
OR
$('title' ).visualEffect('Scale', 200, { scaleY:false, scaleContent:false });