各種顯示效果（Effect）

Effect效果對象下拉效果&上拉效果

 

<div id="d1">

 aaaaaaa<p>bbbbbbbbbbbbbbbbb<p>ccccccccccccc<p>

</div>

 <a href="#" onclick="Effect.BlindDown('d1',{});; return false;">BlindDown()</a>

<p>

  <a href="#" onclick="Effect.BlindUp('d1',{});; return false;">BlindUp()</a>

Effect.BlindDown('d1',{})函數的花括弧裡面{}可以跟參數：

 duration:1.0; 這個數字表示動作期間。

delay: 0.5   延遲0.5秒再啟動效果

如果想讓一個Div開始的時候隱藏，點擊下拉的時候才拉下，那麼只需要將此Div的屬性設為：display: none

 

上滾&下滾效果

這一組函數:

Effect.SlideUp('d1',{});

Effect.SlideDown('d1',{});

這組函數效果與Blind那一組基本一樣，效果粗看起來差不多……我也是細心比較才發現的。原來Blind這一對內容是不會隨著上拉或下拉而動的。而Slide中的內容會被拉上或拉下。

 

變色閃動效果

Effect.Highlight('d1',{duration:1.5})

此元素將會改變幾次顏色並最終返回原來的顏色。

 

漸層顯示效果

Effect.Appear(‘d1’,{})

原來的元素初始CSS為display:none,用此效果後漸漸顯示，漸層的alpha濾鏡效果。

膨脹消失效果

Effect.Puff(‘d1’,{})

 

消失後可以使用Element.show('d1') 再次將元素顯示出來。

 

漸漸消失效果

Effect.Fade('d1')

漸漸顯示效果

Effect.Appear('test_img')

震動效果

Effect.Shake(‘d1’,{})

此元素將會左右震動

閃爍效果

Effect.Pulsate('d1',{})

此函數通過alpha濾鏡來進行閃爍。

 

長大效果

 Effect.Grow("d1",

{duration:5.0, direction: 'bottom-right', opacityTransition: Effect.Transitions.linear});

其中:direction 是指的元素從什麼方向進入。

如果不指定後面的參數，元素預設是從下面的中間開始變大。沒有alpha效果。

萎縮效果

Effect.Shrink(“d1”,{})

長大效果Grow()的相反效果。

 

Toggle各種效果

漢語裡面不知道怎麼翻譯Toggle，大體意思是：當某物開啟的時候觸發就關閉，而關閉的時候觸發就開啟 的一種像”乒乓開關”的行為。這種行為在做頁面時特別有用。

Effect.toggle('d2','BLIND')

Effect.toggle('d2',’appear’)

Effect.toggle('d2',’slide’)

…

似乎所有這種有著相反效果的函數都可以在這裡設定Toggle, ’BLIND’中的效果名大小寫不敏感。

 

 

取消效果函數

這幾個函數真是乏善可陳……唯一要提的就是關於中止這幾個動畫過程的函數：cancel()

例如：

effect1=new Effect.SlideUp(‘d1’,{duration:10.0});

想要在這10秒鐘中止動畫過程： effect1.cancel()

 

效果隊列

這個神秘的queue屬性，還有待進一步學習……

  function startTimeline() {

    // 3x highlight in front

    for(var i=0; i<3; i++)

      new Effect.Highlight('d3', { duration: 1.0, queue: 'front' });

   

    // insert scale at very beginning

    new Effect.Scale('d1', 75, { scaleContent: true, duration: 1.0, queue: 'front' });

   

    // parallel implied, delay 0.5 sec

    new Effect.Highlight('d1', { delay: 0.5 });

   

    // puff at end

    new Effect.Puff('d2', { duration: 4.0, queue: 'end' });

  }