プログラムから制御する

reflectionはプログラムから高さや不透明度を制御することができます。新たに画像に反射効果を追加するにはReflection.add()を使います。最初のパラメータに反射効果を追加するオブジェクト(<img>タグ)を指定します。2番目のパラメータに高さと不透明度を指定することができます。サンプル05では追加ボタンがクリックされると．以下のようにID名myPhotoの画像に不透明度50%、高さ90%の反射効果を追加しています。すでに反射効果が追加されている場合は、新たな高さと不透明度に更新されます。

Reflection.add(document.getElementById("myPhoto"), { height: 0.9, opacity: 0.5 });

サンプル05の実行結果

ボタンを押すと反射効果が実現

サンプル05

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>reflection.jsサンプル</title>
            <style type="text/css"><!--
            h1 { color:white; }
            body { background-color:black; }
            --></style>
            <script type="text/javascript" src="js/reflection.js"></script>
            <script type="text/javascript"><!--
                window.onload = function(){
                        document.getElementById("addButton").onclick = function(){
                        Reflection.add(document.getElementById("myPhoto"), { height: 0.9, opacity: 0.5 });
                    }
                }
            // --></script>
        </head>
        <body>
        <h1>reflection.jsサンプル</h1>
            <img src="images/logo.png" id="myPhoto">
            <form>
                <input type="button" value="追加" id="addButton">
            </form>
        </body>
    </html>

2番目のパラメータは省略可能なので以下のように指定することもできます。

Reflection.add(document.getElementById("myPhoto"));

この場合はデフォルトの高さと不透明度が適用されます。デフォルトの高さと不透明度はReflection.defaultHeightとReflection.defaultOpacityで指定できます。サンプル06では以下のようにして高さを50%、不透明度を100%にしています。

Reflection.defaultHeight = 0.5;
Reflection.defaultOpacity = 1.0;

サンプル06の実行結果

ボタンをクリックすると高さ50%、不透明度100%になる

サンプル06

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>reflection.jsサンプル</title>
            <style type="text/css"><!--
            h1 { color:white; }
            body { background-color:black; }
            --></style>
            <script type="text/javascript" src="js/reflection.js"></script>
            <script type="text/javascript"><!--
                window.onload = function(){
                        document.getElementById("addButton").onclick = function(){
                        Reflection.defaultHeight = 0.5;
                        Reflection.defaultOpacity = 1.0;
                        Reflection.add(document.getElementById("myPhoto"));
                    }
                }
            // --></script>
        </head>
        <body>
        <h1>reflection.jsサンプル</h1>
            <img src="images/logo.png" id="myPhoto">
            <form>
                <input type="button" value="追加" id="addButton">
            </form>
        </body>
</html>