MooTools-Fx.Tween

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>

다음과 같은 출력을 받게됩니다.

산출

바래다()

이 방법은 요소 불투명도 또는 투명도를 조정합니다. MooTools를 사용하여 div의 불투명도를 조정하는 버튼을 제공하는 예를 들어 보겠습니다. 다음 코드를 살펴보십시오.

예

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

다음과 같은 출력을 받게됩니다.

산출

클릭 fade to 50% button div 불투명도를 50 %로 줄입니다.

가장 밝은 부분()

이 방법은 다른 배경색을 사용하여 요소를 강조합니다. 여기에는 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에 유지하고 플래시 하이라이트의 변화를 관찰하십시오.