script.aculo.us - 运动效果

说明

此效果可移动元素。它旧的版本名称为 Effect.MoveBy.

为了使此效果在所有浏览器中正常使用，待移动的元素必须是定位元素。也就是说，必须对其应用 CSS 定位规则，定位值可以是 绝对 或 相对。

语法

可以使用以下两种形式之一来使用此效果：-

new Effect.MoveBy('id_of_element', {x, y, mode, [options]});
OR
new Effect.MoveBy(element, {x, y, mode, [options]});

特定于效果的参数

除了 通用参数 外，此效果还具有以下参数。

序号 选项 & 说明
1

x 坐标

指定水平位置的变化。负 x 值将把元素向左移动。
2

y 坐标

指定垂直位置的变化。负值会将元素沿页面“向上”移动。
3

方式

指定元素的位置模式。它可以是 绝对 或 相对。默认情况下，它是 相对。

示例

实时演示 
<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.htm
打印页面
上一个
下一个
广告