script.aculo.us-スケール効果

説明

この効果により、要素が徐々に拡大または縮小され、場合によっては1つの軸（水平または垂直）のみが拡大されます。この効果を使用して、ターゲット要素のサイズを調整できます。

構文

この効果を使用するには、次の2つの形式のいずれかを使用できます-

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

_scaleToPercent_パラメーターは、ターゲット要素がスケーリングされる開始サイズの割合を示す数値を指定します。したがって、値200はターゲットを開始サイズの2倍にスケーリングし、値50はターゲットを開始サイズの半分にスケーリングします。

エフェクト固有のパラメーター

この効果には、リンクに加えて次のパラメーターがあります：/script.aculo.us/scriptaculous_common_parameters [common parameters]。

Sr.No	Option & Description
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>

これにより、次の結果が生成されます–

Script.aculo.us-scriptaculous-scale-effect

script.aculo.us-スケール効果

説明

構文

エフェクト固有のパラメーター

例

目次