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
列印頁面
上一個
下一個
廣告