script.aculo.us - 可视化效果

script.aculo.us 的效果分为两组：

核心效果

以下六个核心效果是 script.aculo.us 可视化效果 JavaScript 库的基础。

所有核心效果都支持各种常用参数以及特定于效果的参数，并且这些效果名称区分大小写。

本教程中讨论了所有特定于效果的常用参数以及效果。

组合效果

所有组合效果都基于五个核心效果，并被认为是允许您编写自己的效果的示例。

通常，这些效果依赖于其他效果的并行、同步执行。这种执行很容易实现，因此创建您自己的组合效果非常容易。以下是组合效果的列表：

此外，还有一个用于您想要使用出现/淡出、滑动或百叶窗动画暂时显示的元素的Effect.toggle实用程序方法。

Effect.toggle (切换)

效果所需的库文件

要使用 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>

调用效果函数

启动核心效果的正确方法通常是使用new运算符。根据您的喜好，您可以使用两种语法之一：

语法

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

这两种语法在技术上是等效的。在这两者之间进行选择主要取决于您个人的代码美感。

示例

这里有两个等效的调用，您可以看到语法是如何相关的，它们是可以互换的：

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

打印页面