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

列印頁面