script.aculo.us - Scale 缩放效果
说明
此效果会逐渐放大或缩小元素，可能仅在一个轴(水平或垂直)上。您可以使用此效果调整目标元素的大小。
语法
您可以使用以下两种形式之一来使用此效果 −
new Effect.Scale('id_of_element', scaleToPercent, [options]);
OR
new Effect.Scale(element, scaleToPercent, [options]);
scaleToPercent 参数指定一个数值，该数值表示目标元素要缩放到的起始大小的百分比。因此，值为 200 会将目标缩放为其起始大小的两倍，而值为 50 会将其缩放为其起始大小的一半。
效果特定参数
除了通用参数之外，此效果还具有以下参数。
| Sr.No | Option &描述 |
|---|---|
| 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 }i> |
示例
<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.html
