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

此效果用於垂直或水平逐漸放大或縮小元素。它更改元素的寬度和高度尺寸以及em單位的基礎。

用法:

new Effect.Scale('element_id', percent, [options]);
or
new Effect.Scale(element, percent, [options]);

效果選項

Option	Description
scaleX	設置是否應水平縮放元素，默認情況下為true。
scaleY	設置是否垂直縮放元素，默認情況下為true。
scaleContent	設置是否應啟用內容縮放，默認情況下為true。
scaleFromCenter	如果為true，則以元素的中心保持在屏幕上相同位置的方式縮放元素，默認情況下為false。
scaleMode	‘box’(默認，縮放元素的可見區域)或‘contents’(縮放整個元素，即通常僅通過滾動可見的部分都被考慮在內)。您還可以通過將originalHeight和originalWidth變量分配給scaleMode來控製元素的大小。例如：scaleMode：{originalHeight：900，originalWidth：900}
scaleFrom	設置縮放的起始百分比，默認情況下為100.00。

例：

<!DOCTYPE html> 
<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)"> 
        <h3>Click me to Scale</h3> 
    </div> 
</body> 
  
</html>

輸出：

相關用法

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