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

列印頁面