script.aculo.us - Morph 变形效果
说明
此效果会更改元素的 CSS 属性。它采用一组 CSS 属性，并逐渐将元素的相关样式值迁移到这些目标。
此效果采用单个特定选项，名为 style。为方便起见，您可以通过三种方式表达目标样式定义 −
作为 CSS 类名。然后，元素将变形为此类名的样式规范。
作为内联样式规范(认为样式 = 属性值)。
作为 CSS 属性的哈希值。属性名称允许使用官方(基于连字符)和驼峰式(例如 borderStyle)语法。
注意 −元素的原始样式必须位于其样式属性中，而不是外部样式表中，以便 script.aculo.us 对其进行变形。
语法
您可以使用以下两种形式之一来使用此效果 −
new Effect.Morph('id_of_element', [options]);
或
new Effect.Morph(element, [options]);
效果特定参数
除了通用参数之外，此效果还具有以下参数。
| Sr.No | 选项和说明 |
|---|---|
| 1 | style 元素的目标样式，使用标准 CSS 语法编写，或作为哈希值。 |
示例
<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 MorphEffect(element){
new Effect.Morph(element,
{
style:'background:#f00; color: #fff; '+' border: 20px solid #f88; font-size:2em', duration:0.8}
);
}
</script>
</head>
<body>
<div onclick = "MorphEffect(this)">
Click me to see the result of Morph Method
</div>
</body>
</html>
这将产生以下结果 −
scriptaculous_effects.html
