MooTools - Fx.Tween

MooTools cung cấp các phím tắt FX.Tween khác nhau cho các quá trình chuyển đổi khác nhau, chẳng hạn như các hiệu ứng hào nhoáng giúp chuyển thành chuyển tiếp hoạt hình mượt mà. Hãy để chúng tôi thảo luận một vài phương pháp từ các phím tắt Tween.

tween ()

Phương pháp này cung cấp quá trình chuyển đổi mượt mà giữa hai giá trị thuộc tính kiểu. Chúng ta hãy lấy một ví dụ sử dụng phương thức tween để thay đổi chiều rộng của một div từ 100px thành 300px. Hãy xem đoạn mã sau.

Thí dụ

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

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

Đầu ra

phai màu()

Phương pháp này điều chỉnh độ mờ của phần tử hoặc độ trong suốt. Hãy để chúng tôi lấy một ví dụ trong đó, chúng tôi cung cấp một nút để điều chỉnh độ mờ của một div bằng MooTools. Hãy xem đoạn mã sau.

Thí dụ

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

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

Đầu ra

Bấm vào fade to 50% button để giảm độ mờ của div xuống 50%.

Điểm nổi bật()

Phương pháp này làm nổi bật một phần tử bằng cách sử dụng các màu nền khác nhau. Nó chứa hai chức năng chính của Tween Flash.

Trong chức năng đầu tiên, Tween Flash được sử dụng để áp dụng các màu nền khác nhau cho các phần tử.
Khi Tween Flash đặt một màu nền khác, thì nó sẽ chuyển sang màu nền khác.

Phương pháp này được sử dụng để đánh dấu một phần tử sau khi chọn. Hãy để chúng tôi lấy một ví dụ để hiểu phương pháp này. Hãy xem đoạn mã sau.

Thí dụ

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

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

Đầu ra

Cố gắng giữ con trỏ chuột trên các div màu và quan sát những thay đổi về điểm sáng của đèn flash.