JavaScript script.aculo.us视觉效果

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

核心效果

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

Effect.Opacity
Effect.Scale
Effect.Morph
Effect.Move
Effect.Highlight
Effect.Parallel

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

所有的特定效果常见参数已经在这个教程中讨论过。

组合效果

所有的组合效果都基于这五个核心效果，并被视为示例，让你可以编写自己的效果。

通常这些效果依赖其他效果的并行、同步执行。这种执行方式很容易实现，因此创建自己的组合效果非常简单。下面是一些组合效果的列表 –

Effect.Appear
Effect.Fade
Effect.Puff
Effect.DropOut
Effect.Shake
Effect.SwitchOff
Effect.BlindDown
Effect.BlindUp
Effect.SlideDown
Effect.SlideUp
Effect.Pulsate
Effect.Squish
Effect.Fold
Effect.Grow
Effect.Shrink

此外，还有一个 Effect.toggle 实用程序方法，用于暂时显示一个元素，使用Appear/Fade、Slide或Blind动画。

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 });