script.aculo.us SlideDown效果用法及代碼示例

在本文中，我們將通過使用名為script.aculo.us的JavaScript庫(從一個平滑過渡到另一個平滑過渡)來演示SlideDown的效果。我們也可以調整效果的持續時間。

用法:

Effect.SlideDown('id_of_element');

Effect.SlideDown('id_of_element', { duration:3.0 });

注意：要使用此庫，我們假設先安裝或下載該庫，然後在我們的程序中使用它。為此，您可以點擊鏈接http://script.aculo.us/downloads。

方法：

為了演示此函數的用法，我們編寫了一小段代碼。我們編寫了一個名為ShowEffect()方法的小型JavaScript函數，該函數使用此庫的SlideDown()方法。通過單擊單擊將圖像滑入！，您將清楚地看到效果。

例：要查看效果，請先安裝該庫，然後在本地環境中打開此程序。

HTML

<html> 
   <head>     
  
      <script type = "text/javascript" 
       src="scriptaculous-js-1.9.0/lib/prototype.js"> 
      </script> 
      <script type = "text/javascript" 
       src="scriptaculous-js-1.9.0/src/scriptaculous.js?load = effects"> 
      </script> 
          
      <script type = "text/javascript"> 
        
           function ShowEffect(element){ 
            new Effect.SlideDown(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 the image to SlideDown! 
        </div> 
        <br/> 
           
        <div id="hideshow" onclick = "ShowEffect(this);"> 
           <img src = "GEEKSIMAGES/geeks1.PNG" alt = ""  /><br/> 
            Image to Slidedown 
        </div> 
   </body> 
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自Jitender_1998大神的英文原創作品 script.aculo.us SlideDown Effect。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。