MooTools - Fx.Events

Fx.Events cung cấp một số tùy chọn để nâng một số mã ở các cấp độ khác nhau trong suốt hiệu ứng hoạt ảnh. Nó cung cấp cho bạn sự kiểm soát đối với các hình thái và hình thái của bạn. Tùy chọn mà Fx.Events cung cấp -

onStart - Nó sẽ nâng mã để thực thi khi Fx bắt đầu.
onCancel - Nó sẽ nâng mã để thực thi khi Fx bị hủy.
onComplete - Nó sẽ nâng mã để thực thi khi Fx hoàn thành.
onChainComplete - sẽ nâng mã để thực thi khi Fx chuỗi hoàn thành.

Thí dụ

Hãy để chúng tôi lấy một ví dụ trong đó, có các div trên trang web. Chúng tôi tiến hành bằng cách áp dụng các phương pháp Sự kiện cho các div. Phương thức đầu tiên là phương thức onStart () để tô sáng div khi con trỏ chuột đi vào vùng div.

Phương thức thứ hai là phương thức onComplete () làm nổi bật div khi con trỏ chuột rời khỏi vùng div. Và khi con trỏ chuột vào vùng div sẽ tự động kích thước div tăng thêm 400px. Chúng tôi sẽ cố gắng thực thi tất cả các chức năng này bằng các phương thức Fx.Events. Hãy xem đoạn mã sau.

<!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>

Bạn sẽ nhận được kết quả sau:

Đầu ra