script.aculo.us - 缩放效果

描述

此效果逐渐放大或缩小元素，可能仅在一个轴上（水平或垂直）。您可以使用此效果来调整目标元素的大小。

语法

您可以使用以下两种形式之一来使用此效果 -

new Effect.Scale('id_of_element', scaleToPercent, [options]);
OR
new Effect.Scale(element, scaleToPercent, [options]);

scaleToPercent 参数指定一个数值，该数值指示目标元素要缩放到的起始大小的百分比。因此，值 200 会将目标缩放为其起始大小的两倍，而值 50 会将其缩放为其起始大小的一半。

特定于效果的参数

除了通用参数之外，此效果还具有以下参数。

序号	选项和描述
1	scaleX 设置元素是否应水平缩放，默认为 true。
2	scaleY 设置元素是否应垂直缩放，默认为 true。
3	scaleContent 设置是否应启用内容缩放，默认为 true。
4	scaleFromCenter 如果为 true，则以元素中心保持屏幕上相同位置的方式缩放元素，默认为 false。
5	scaleFrom 设置缩放的起始百分比，默认为 100.0。
6	scaleMode “box”（默认值，缩放元素的可视区域）或“contents”（缩放整个元素，即通常仅通过滚动可见的部分也被考虑在内）。您还可以通过将originalHeight 和originalWidth 变量分配给 scaleMode 来精确控制元素将变成的大小，如下所示 - scaleMode: { originalHeight: 500, originalWidth: 300 }

示例

实时演示

<html>
   <head>
      <title>script.aculo.us examples</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects" ></script>
      
      <script type = "text/javascript">		
         function ScaleEffect(element){
            new Effect.Scale(element, 150);
         }
      </script>
   </head>

   <body>
      <div onclick = "ScaleEffect(this)">
         Click me to see the result of scale function
      </div>
   </body>
</html>

这将产生以下结果 -

scriptaculous_effects.htm

打印页面