Prototype.js - Effectサンプル
これはオブジェクト指向JavaScriptライブラリ PrototypeのEffectのサンプルです。付属のサンプルにちょっと手を加えてちょっ と日本語訳したものです。
Effect.Fade() & Effect.Appear()
呼び出し方法
new Effect.Appear(element)
new Effect.Fade(element)
コード例
onclick="new Effect.Appear('appear')"
onclick="new Effect.Fade('appear')"
サンプル
Effect.Highlight()
呼び出し方法
new Effect.Highlight(element)
コード例
onclick="new Effect.Highlight('highlight')"
サンプル
マウスをあわせるとハイライトします。
Effect.Scale()
呼び出し方法
new Effect.Scale(element, percent)
注意: Effect.Scaleをdivに使用する場合、その中に含まれる全ての要素はem でwidthもしくはheightのセットを指定しなければならない。画像に使用する 場合はwidth,heightの指定は必要ない。また、Effect.Scaleはターゲットの 要素に対するスケーリングを意識していて、善処する。percentパ ラメータはオリジナルの画像サイズの相対値である。
コード例
onmouseover="new Effect.Scale('scale',150)" onmouseout="new Effect.Scale('scale',100)"
サンプル
Effect.Squish()
呼び出し方法
new Effect.Squish(element)
コード例
onclick="new Effect.Squish(element)"
サンプル
Effect.ContentZoom()
呼び出し方法
new Effect.ContentZoom(element)
コード例
onmouseover="new Effect.ContentZoom(element, percent)" onmouseout="new Effect.ContentZoom(element,
percent)
サンプル
Effect.Puff()
呼び出し方法
new Effect.Puff(element)
コード例
onclick="new Effect.Puff(element)"
サンプル
Effect.Puffは絶対指定、もしくは相対指定された要素に働きます。この例で はfloat:left指定されたdivに適用しています。