Учебники

MooTools — Fx.Events

Сентябрь 8, 2018

Fx.Events предоставляет несколько опций для поднятия некоторых кодов на разных уровнях в течение всего эффекта анимации. Это дает вам контроль над вашими подростками и морфами. Опция, которую предоставляет Fx.Events —

  • onStart — он поднимет код для выполнения при запуске Fx.

  • onCancel — он поднимет код для выполнения при отмене Fx.

  • onComplete — он поднимет код для выполнения после завершения Fx.

  • onChainComplete — вызовет код для выполнения после завершения цепочки Fx.

onStart — он поднимет код для выполнения при запуске Fx.

onCancel — он поднимет код для выполнения при отмене Fx.

onComplete — он поднимет код для выполнения после завершения Fx.

onChainComplete — вызовет код для выполнения после завершения цепочки Fx.

пример

Давайте рассмотрим пример, в котором на веб-странице есть элементы div. Мы продолжаем применять методы Event к элементам div. Первый метод — это метод onStart (), который подсвечивает div, когда указатель мыши входит в область div.

Второй — это метод onComplete (), который подсвечивает div, когда указатель мыши покидает область div. И когда указатель мыши входит в область div автоматически, размер div увеличивается на 400px. Мы попытаемся выполнить все эти функции, используя методы Fx.Events. Посмотрите на следующий код. 

<!DOCTYPE html>
<html>

   <head>
      <style>
         #quadin {
            width: 100px;
            height: 20px;
            background-color: #F4D03F;
            border: 2px solid #808B96;
         }
         #quadout {
            width: 100px;
            height: 20px;
            background-color: #F4D03F;
            border: 2px solid #808B96;
         }
         #quadinout {
            width: 100px;
            height: 20px;
            background-color: #F4D03F;
            border: 2px solid #808B96;
         }
      </style>
      
      <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 enterFunction = function() {
            this.start('width', '400px');
         }
         var leaveFunction = function() {
            this.start('width', '200px');
         }
         
         window.addEvent('domready', function() {
            var quadIn = $('quadin');
            var quadOut = $('quadout');
            var quadInOut = $('quadinout');
            
            quadIn = new Fx.Tween(quadIn, {
               link: 'cancel',
               transition: Fx.Transitions.Quad.easeIn,
               
               onStart: function(passes_tween_element){
                  passes_tween_element.highlight('#C54641');
               },
               
               onComplete: function(passes_tween_element){
                  passes_tween_element.highlight('#E67F0E');
               }
            });
            
            quadOut = new Fx.Tween(quadOut, {
               link: 'cancel',
               transition: 'quad:out'
            });
            
            quadInOut = new Fx.Tween(quadInOut, {
               link: 'cancel',
               transition: 'quad:in:out'
            });
            
            $('quadin').addEvents({
               'mouseenter': enterFunction.bind(quadIn),
               'mouseleave': leaveFunction.bind(quadIn)
            });
            
            $('quadout').addEvents({
               'mouseenter': enterFunction.bind(quadOut),
               'mouseleave': leaveFunction.bind(quadOut)
            });
            
            $('quadinout').addEvents({
               'mouseenter': enterFunction.bind(quadInOut),
               'mouseleave': leaveFunction.bind(quadInOut)
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "quadin"> Quad : in</div><br/>
      <div id = "quadout"> Quad : out</div><br/>
      <div id = "quadinout"> Quad : in-out</div><br/>
   </body>
   
</html>

Вы получите следующий вывод —

44
Share: