Script.aculo.us 简明教程

script.aculo.us - Visual Effects

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

The script.aculo.us effects are divided into two groups −

Core Effects

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

The following six core effects are the foundation of the script.aculo.us Visual Effects JavaScript library.

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

All the core effects support various common parameters as well as effect-specific parameters and these effect names are case-sensitive.

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

All the effect-specific Common Parameters have been discussed in this tutorial along with the effects.

Combination Effects

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

All the combination effects are based on the five Core Effects, and are thought of as examples to allow you to write your own effects.

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

Usually these effects rely on the parallel, synchronized execution of other effects. Such an execution is readily available, hence creating your own combined effects is very easy. Here is a list of Combination Effects −

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

Additionally, there’s the Effect.toggle utility method for elements you want to show temporarily with an Appear/Fade, Slide or Blind animation.

Effect.toggle

Library Files Required for Effects

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

To use the effect capabilities of script.aculo.us, you will need to load the effects module. So, your minimum loading for script.aculo.us will look like this:

<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 运算符。根据偏好，你可以使用两种语法之一 −

The proper way to start a core effect is usually with the new operator. Depending on your preferences, you can use one of two syntaxes −

Syntax

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

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

These two syntaxes are technically equivalent. Choosing between the two is mostly about your personal sense of code aesthetics.

Example

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

Here are two equivalent calls, so you can see how the syntaxes are related, which are very much interchangeable −

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