script.aculo.us - Move 移动效果
描述
此效果移动元素。其旧版本的名称为 Effect.MoveBy。
为了使此效果在所有浏览器中正常工作，要移动的元素必须是定位元素。也就是说，它必须应用 CSS 位置规则，并且位置的值可以是 absolute 或 relative。
语法
您可以使用以下两种形式之一来使用此效果 −
new Effect.MoveBy('id_of_element', {x, y, mode, [options]});
或
new Effect.MoveBy(element, {x, y, mode, [options]});
效果特定参数
除了通用参数之外，此效果还具有以下参数。
| Sr.No | 选项和说明 |
|---|---|
| 1 |
x-coordinate 指定水平位置的变化。负 x 值将元素向左移动。 |
| 2 |
y-coordinate 指定垂直位置的变化。负值将元素向页面"上"移动。 |
| 3 |
mode 指定元素的定位模式。它可以是 absolute 或 relative。默认情况下，它是 relative。 |
示例
<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 MoveEffect(element){
new Effect.MoveBy(element,
{
x:10,
y:10,
duration:1
}
)
}
</script>
</head>
<body>
<div onclick = "MoveEffect(this)">
Click me to see the result of Move Method
</div>
</body>
</html>
它将缓慢地将目标元素向下和向右移动各 10 个像素。
这将产生以下结果 −
scriptaculous_effects.html
