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

在本文中，我们将通过使用JavaScript库(称为script.aculo.us)并从一个平滑过渡到另一个来演示Puff的效果。我们也可以调整效果的持续时间。

用法:

Effect.Puff('id_of_element');

Effect.Puff('id_of_element', { duration:3 });

注意：要使用此库，我们假设先安装该库，然后在我们的程序中使用它。为此，您可以点击链接http://script.aculo.us/downloads

方法：

为了演示此函数的用法，我们编写了一小段代码。我们编写了一个名为PuffEffect()方法的小型JavaScript函数，该函数使用此库的Effect.Puff()方法。通过单击“单击我以抽气”，您将清楚地看到效果。

例：要查看效果，请先安装该库，然后在本地环境中打开此程序。

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 PuffEffect(element){ 
            new Effect.Puff(element, {duration:3}); 
         } 
  
        function displayImage(element){ 
            new Effect.Appear(element,{duration:1, from:1.1, to:1.2}); 
         } 
      </script> 
   </head> 
     
   <body> 
      <div onclick = "displayImage('imageId')"> 
         Click me to display the image 
      </div> 
      <br/> 
           
      <div id="imageId" onclick = "PuffEffect(this);"> 
       <img src = "GEEKSIMAGES/geeks1.PNG" alt = ""  /><br/> 
       Click Image to Puff Out 
     </div> 
   </body> 
</html>

输出：

相关用法

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