script.aculo.us 高光效果

script.aculo.us 库是一个跨浏览器库，旨在改进网站的用户界面。在本文中，我们将演示高光效果。此效果用于使用可自定义的颜色使元素平滑突出。我们也可以调整效果的持续时间。

句法：

Effect.Highlight( 'id_of_element', [options] )

要么

Effect.Highlight( element, [options] )

选项：它有四个对象，如上所述，如下所述：

• startcolor：用于设置效果第一帧的颜色。默认值为“#ffff99”。
• endcolor：用于设置效果最后一帧的颜色。默认值为“#ffffff”。
• restorecolor：用于设置效果完成后元素的背景颜色。默认值是元素的当前背景颜色。
• keepBackgroundImage：用于设置是否保留元素上的任何背景图像。

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

示例 1：

HTML

  

    
    
  
    
    
  
    
        function ShowEffect(element) {
  
            // Using the Highlight effect with
            // the base options of the
            // Effect class
            new Effect.Highlight(element, {
                duration: 1,
                from: 0,
                to: 1.0
            });
        }
    

  

    
        GeeksforGeeks
    
  
    script.aculo.us Highlight Effect
      
    
        Click me to Highlight the line!
    
      
    
    
    
        LINE TO HIGHLIGHT
    

  

输出：

示例 2：

HTML

  

    
    
  
    
    
  
    
        function ShowEffect(element) {
  
            // Using the Highlight effect with
            // the startcolor and endcolor
            // options of the effect
            new Effect.Highlight(element, {
                startcolor: '#ff0000',
                endcolor: '#ffff00'
            });
        }
    

  

    
        GeeksforGeeks
    
  
    script.aculo.us Highlight Effect
      
    
        Click me to Highlight the line!
    
    
    
    
        GeeksforGeeks
    

  

输出：