Script.aculo.us-scriptaculous-effects

提供:Dev Guides
移動先:案内検索

script.aculo.us-視覚効果

script.aculo.usの効果は2つのグループに分けられます-

コアエフェクト

次の6つのコアエフェクトは、script.aculo.us Visual Effects JavaScriptライブラリの基盤です。

  • リンク:/script.aculo.us/scriptaculous_opacity_effect [Effect.Opacity]
  • リンク:/script.aculo.us/scriptaculous_scale_effect [Effect.Scale]
  • リンク:/script.aculo.us/scriptaculous_morph_effect [Effect.Morph]
  • リンク:/script.aculo.us/scriptaculous_move_effect [Effect.Move]
  • リンク:/script.aculo.us/scriptaculous_highlight_effect [Effect.Highlight]
  • リンク:/script.aculo.us/scriptaculous_parallel_effect [Effect.Parallel]

すべてのコアエフェクトは、さまざまな共通パラメーターとエフェクト固有のパラメーターをサポートし、これらのエフェクト名では大文字と小文字が区別されます。

すべてのエフェクト固有のリンク:/script.aculo.us/scriptaculous_common_parameters [共通パラメーター]は、エフェクトとともにこのチュートリアルで説明されています。

組み合わせ効果

すべての組み合わせ効果は5つのコア効果に基づいており、独自の効果を作成できるようにするための例と考えられています。

通常、これらの効果は、他の効果の並列同期実行に依存しています。 このような実行はすぐに利用できるため、独自の複合効果の作成は非常に簡単です。 ここに組み合わせ効果のリストがあります-

  • リンク:/script.aculo.us/scriptaculous_appear_effect [Effect.Appear]
  • リンク:/script.aculo.us/scriptaculous_fade_effect [Effect.Fade]
  • リンク:/script.aculo.us/scriptaculous_puff_effect [Effect.Puff]
  • リンク:/script.aculo.us/scriptaculous_dropout_effect [Effect.DropOut]
  • リンク:/script.aculo.us/scriptaculous_shake_effect [Effect.Shake]
  • リンク:/script.aculo.us/scriptaculous_switchoff_effect [Effect.SwitchOff]
  • リンク:/script.aculo.us/scriptaculous_blinddown_effect [Effect.BlindDown]
  • リンク:/script.aculo.us/scriptaculous_blindup_effect [Effect.BlindUp]
  • リンク:/script.aculo.us/scriptaculous_slidedown_effect [Effect.SlideDown]
  • リンク:/script.aculo.us/scriptaculous_slideup_effect [Effect.SlideUp]
  • リンク:/script.aculo.us/scriptaculous_pulsate_effect [Effect.Pulsate]
  • リンク:/script.aculo.us/scriptaculous_squish_effect [Effect.Squish]
  • リンク:/script.aculo.us/scriptaculous_fold_effect [Effect.Fold]
  • リンク:/script.aculo.us/scriptaculous_grow_effect [Effect.Grow]
  • リンク:/script.aculo.us/scriptaculous_shrink_effect [Effect.Shrink]

さらに、外観/フェード、スライド、またはブラインドアニメーションで一時的に表示する要素用の Effect.toggle ユーティリティメソッドがあります。

  • リンク:/script.aculo.us/scriptaculous_toggle_effect [Effect.toggle]

エフェクトに必要なライブラリファイル

script.aculo.usのエフェクト機能を使用するには、エフェクトモジュールをロードする必要があります。 したがって、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 演算子を使用することです。 あなたの好みに応じて、2つの構文のいずれかを使用することができます-

構文

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

これら2つの構文は技術的に同等です。 どちらを選択するかは、主に個人のコードの美学に関するものです。

ここに2つの同等の呼び出しがありますので、構文がどのように関連しているかを見ることができ、非常に交換可能です-

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