script.aculo.us 移动效果

script.aculo.us 库是一个跨浏览器库，旨在改进网站的用户界面。在本文中，我们将演示移动效果。此效果用于使元素平滑地移动到给定参数。我们也可以调整效果的持续时间。

句法：

Effect.Move('object', [options] )

参数：此效果在选项对象中具有三个参数，如下所述：

• x：它是一个整数，表示新的左值，绝对或相对取决于模式。
• y：它是一个整数，表示新的最高值，绝对或相对取决于模式。
• mode：它是一个字符串，指定元素是绝对移动还是相对于它自己的位置移动。

为了演示这个函数的使用，我们编写了一小段代码。我们在其中编写了一个名为 ShowEffect 方法的小 JavaScript函数，它使用了这个库的Move方法。以下示例演示了该方法。

示例 1：

HTML

  

    
    
  
    
    
  
    
        function ShowEffect(element) {
  
            // Using the Move effect to
            // move the element to the
            // given absolute position
            new Effect.Move(element, {
                x: 0,
                y: 0,
                mode: 'absolute'
            });
        }
    

  

    
        GeeksforGeeks
    
  
    script.aculo.us Move Effect
      
    
        Click me to Move the line!
    
      
    
    
        LINE TO MOVE
    

  

输出：

示例 2：

HTML

  

    
    
  
    
    
  
    
        function ShowEffect(element) {
  
            // Using the Move effect to
            // move the element to the
            // given relative position
            new Effect.Move(element, {
                x: 50,
                y: -50,
                mode: 'relative'
            });
        }
    

  

    
        GeeksforGeeks
    
  
    script.aculo.us Move Effect
      
    
        Click me to show the effect
    
      
    
    
        GeeksforGeeks
    

  

输出：