MooTools - Fx.Morph

Fx.Morph 是 MooTools 提供的一個函式。它用於為樣式屬性之間的過渡建立新的補間。在變形時，我們必須使用物件選擇元素，然後可以對它應用不同的函式。我們還需要將元素與新建立的補間繫結在一起。

我們舉一個例子，在網頁上提供三個按鈕。第一個是 SET 按鈕，它使用 style 屬性（如 height、width 和 color）建立一個元素。第二個是 MORPH 按鈕，它更改元素的 style 屬性。第三個是 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>

您將收到以下輸出 -

輸出

列印頁面