寺子屋未満

[script.aculo.us Reflector]
http://mir.aculo.us/2006/4/27/like-reflections-try-the-reflector
（サンプル）http://mir.aculo.us/stuff/reflector/reflector.html
prototype.jsとscript.aculo.usのコード（scriptaculous.js）を使用して、
以下のコードにより、画像に鏡面効果を与えるスクリプトです。

<script type="text/javascript">
var Reflector = {
  reflect: function(element) {
    element = $(element);
    options = $H({
      amount: 1/3,
      opacity: 1/3
    }).merge(arguments[1] || {});

    var p = element.parentNode, n = element.nextSibling;
    var d = 1.0/(element.height*options.amount);

    (element.height*options.amount).times( function(line) {
      var h = Builder.node('div',{style:'height:1px;overflow:hidden'},
        [Builder.node('img',{src:element.src,
          style:'margin-top:-'+(element.height-line-1)+'px'
        })]);
      p.insertBefore(h,n);
      $(h).setOpacity((1-d*line)*options.opacity);
    });
  }
}
</script>

今回はオプション引数について解析します。
オプション引数を指定する場合、スクリプト実行時（オブジェクト生成時）
以下のように記述します。
Reflector.reflect('[imgタグに付与したID]',{ amount:[数値], opacity:[数値] });
引数に関してはどちらか片方のみの指定でもOKです。
配列内の順序も問いません。

◆amount
元画面に対し、どのくらいの領域に鏡面効果を表示するか
数値を指定します。
ソースコードを見てわかるように、デフォルトは1/3です。
数値は小数でも分数でもOKです。
1より大きな数値を指定しても、あふれた部分に関しては
鏡面効果とはなりません（当たり前ですが。）
端の画像が引き伸ばされた状態となります。

◆opacity
鏡面画像の透明度を設定します（0～100の間で設定します）。
ソースコードを見てわかるように、デフォルトは1/3です。
数値は小数でも分数でもOKです。

◆簡単なソース解説
本当に簡単ですが。
script.aculo.usライブラリのBuilderオブジェクト
を使用し、amountで指定された割合分
imgの底辺から1pxずつ反転画像をコピー表示しています。（builder.js参照）
そして、Effect.Opacityオブジェクトにopacityの値を設定し
生成した画像部分の透明度を変更しています。（effects.js参照）

【サンプル】

amount:1,opacity:100と設定すると、
また違った画像に見えて、おもしろいですね。