当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


script.aculo.us SwitchOff效果用法及代码示例


在本文中,我们将通过使用名为script.aculo.us的JavaScript库(具有从一个到另一个的平滑过渡)的JavaScript库来演示SwitchOff选项的视觉效果。我们也可以调整效果的持续时间。

用法:

Effect.SwitchOff('id_of_element');

注意:要使用此库,我们应该下载该库,然后在程序中使用它。为此,您可以点击此链接http://script.aculo.us/downloads。

演示:为了演示此函数的使用,我们编写了一小段代码。我们编写了一个小的JavaScript函数ShowEffect()方法,该方法使用了此库的SwitchOff()方法。通过单击“单击我关闭线路!”,您将清楚地看到效果。

例:若要查看效果,请首先在代码中包含库文件,然后在本地环境中打开此程序。



HTML

<html> 
  
<head> 
    <script type="text/javascript" 
        src="prototype.js"> 
    </script> 
  
    <script type="text/javascript" 
        src="scriptaculous.js?load = effects"> 
    </script> 
  
    <script type="text/javascript"> 
  
        function ShowEffect(element) { 
            new Effect.SwitchOff(element,  
                { duration:3.0 }); 
        } 
        function displayImage(element) { 
            new Effect.Appear(element,  
            { duration:1, from:1.1, to:1.2 }); 
        } 
    </script> 
</head> 
  
<body> 
    <div onclick="displayImage('hideshow')"> 
        Click me to display the image! 
    </div> 
    <br /> 
  
    <div id="hideshow" onclick="ShowEffect(this);"> 
        <img src="GEEKSIMAGES/geeks1.PNG" alt="" /><br /> 
        Click me to switch me off. 
    </div> 
</body> 
  
</html>

输出:

相关用法


注:本文由纯净天空筛选整理自Jitender_1998大神的英文原创作品 script.aculo.us SwitchOff Effect。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。