MooTools-Fx.Morph

Fx.Morphは、MooToolsが提供する関数です。スタイルプロパティ間の遷移の新しいトゥイーンを作成するために使用されます。モーフィング中に、オブジェクトを含む要素を選択する必要があります。その後、さまざまな機能を適用できます。また、新しく作成されたトゥイーンに要素をバインドする必要があります。

Webページに3つのボタンを提供する例を見てみましょう。最初のボタンは、高さ、幅、色などのスタイルプロパティを持つ要素を作成する SET ボタンです。 2つ目は、要素のスタイルプロパティを変更する MORPH ボタンです。 3つ目は RESET ボタンで、すべての設定を開始位置に変更します。次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         var morphSet = function(){
            this.set({
               'width': 100,
               'height': 100,
               'background-color': '#884EA0'
            });
         }

         var morphStart = function(){
            this.start({
               'width': 200,
               'height': 200,
               'background-color': '#d3715c'
            });
         }

         var morphReset = function(){
            this.set({
               'width': 0,
               'height': 0,
               'background-color': '#ffffff'
            });
         }

         window.addEvent('domready', function() {
            var morphElement = $('morph_element');
            var morphObject = new Fx.Morph(morphElement);
            $('set').addEvent('click', morphSet.bind(morphObject));
            $('start').addEvent('click', morphStart.bind(morphObject));
            $('reset').addEvent('click', morphReset.bind(morphObject));
         });
      </script>
   </head>

   <body>
      <div id = "morph_element"> </div><br/>
      <input type = "button" id = "set" value = "SET"/>
      <input type = "button" id = "start" value = "START"/>
      <input type = "button" id = "reset" value = "RESET"/>
   </body>

</html>

次の出力が表示されます-

出力

Mootools-fxmorph

MooTools-Fx.Morph

例

出力