❮ script.aculo.us Visual 视觉效果 script.aculo.us Visual 视觉效果 ❯

script.aculo.us - Move 移动效果

更新于 2025/3/6 23:37:17

描述

此效果移动元素。其旧版本的名称为 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。

Sr.No

选项和说明

x-coordinate

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

y-coordinate

指定垂直位置的变化。负值将元素向页面"上"移动。

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