Учебники

MooTools — Fx.Tween

Сентябрь 8, 2018

MooTools предоставляет разные эффекты FX.Tween для разных переходов, таких как эффектные эффекты, которые переводятся в плавные анимированные переходы. Давайте обсудим несколько методов из ярлыков Tween.

Tween ()

Этот метод обеспечивает плавные переходы между двумя значениями свойств стиля. Давайте возьмем пример, который использует метод анимации, чтобы изменить ширину div с 100px до 300px. Посмотрите на следующий код.

пример 

<!DOCTYPE html>
<html>

   <head>
      <style>
         #body_div {
            width: 100px;
            height: 200px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
      </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 tweenFunction = function(){
            $('body_div').tween('width','300px');
         }
         
         window.addEvent('domready', function() {
            $('tween_button').addEvent('click', tweenFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "body_div"> </div><br/>
      <input type = "button" id = "tween_button" value = "Set Width to 300 px"/>
   </body>
   
</html>

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

Выход

замирание ()

Этот метод регулирует непрозрачность элемента или прозрачность. Давайте рассмотрим пример, в котором мы предоставляем кнопку для настройки непрозрачности div с помощью MooTools. Посмотрите на следующий код.

пример 

<!DOCTYPE html>
<html>

   <head>
      <style>
         #body_div {
            width: 100px;
            height: 200px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
      </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 fadeFunction = function(){
            $('body_div').fade('.5');
         }
         
         window.addEvent('domready', function() {
            $('fade_button').addEvent('click', fadeFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "body_div"> </div><br/>
      <input type = "button" id = "fade_button" value = "fade to 50%"/>
   </body>
   
</html>

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

Выход

Нажмите на кнопку исчезновения до 50%, чтобы уменьшить непрозрачность div до 50%.

Изюминка ()

Этот метод выделяет элемент, используя разные цвета фона. Он содержит две основные функции Tween Flash.

  • В первой функциональности Tween Flash используется для применения различных цветов фона к элементам.

  • Как только Tween Flash устанавливает другой цвет фона, он переключается на другой цвет фона.

В первой функциональности Tween Flash используется для применения различных цветов фона к элементам.

Как только Tween Flash устанавливает другой цвет фона, он переключается на другой цвет фона.

Этот метод используется для выделения элемента после выбора. Давайте возьмем пример, чтобы понять этот метод. Посмотрите на следующий код.

пример 

<!DOCTYPE html>
<html>

   <head>
      <style>
         #div1 {
            width: 100px;
            height: 100px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
         #div2 {
            width: 100px;
            height: 100px;
            background-color: #145A32;
            border: 3px solid #dd97a1;
         }
      </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 highlightFunction = function(){
            $('div1').highlight('#eaea16');
         }
         
         var highlightChangeFunction = function(){
            $('div2').highlight('#eaea16', '#FBFCFC');
         }
         
         window.addEvent('domready', function() {
            $('div1').addEvent('mouseover', highlightFunction);
            $('div2').addEvent('mouseover', highlightChangeFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "div1"> </div><br/>
      <div id = "div2"> </div>
   </body>
   
</html>

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

Выход

Постарайтесь удерживать указатель мыши на цветных элементах div и наблюдайте за изменениями в бликах.

46
Share: