Combination Effects 各种组合效果

最新推荐文章于 2022-01-29 15:37:00 发布

最新推荐文章于 2022-01-29 15:37:00 发布 · 156 阅读

文章标签：

#script.aculo.us

js 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了Scriptaculous库中各种视觉效果的使用方法，包括FadeOut、Shake、Highlight等，通过简单的示例代码展示了如何为网页元素添加动态效果。

[b]Effect.Drop Out [/b]
Makes the element drop and fade out at the same time.

让元素掉下去一样的消失的效果！

Examples

  Effect.DropOut('id_of_element');

[url]http://wiki.script.aculo.us/scriptaculous/show/Effect.DropOut[/url]

==============================
[b]Effect.Shake [/b]

Moves the element slightly to the left, then to the right, repeatedly.
元素左右震动效果
Examples


  Effect.Shake('id_of_element');

===================================
[b]Effect.Highlight[/b]

高亮效果

===================================
[b]Effect.Switch Off [/b]
Gives the illusion of a TV-style switch off.
像电视机一样关闭的效果。

Effect.SwitchOff('id_of_element');

=======================================
[b]Effect.BlindDown, Effect.BlindUp
Effect.SlideDown, Effect.SlideUp [/b]
This pair of effects simulates a window blind, where the contents of the affected elements stay in place.

下拉式的展示

  Effect.BlindDown('id_of_element');
  Effect.BlindUp('id_of_element');

  // Make the transion longer by adding options.
  Effect.BlindDown('id_of_element', {duration:3});

======================================
[b]Effect.Pulsate[/b]
Pulsates the element, loops over five times over fading out and in.
元素跳动闪烁效果！！
Examples


  Effect.Pulsate('id_of_element');

Optional parameters:
duration: Number of seconds after which to stop the effect.
from: The minimal opacity during the pulsate, in a value between 0 and 1. For example, use 0.7 for a mild pulsate.
pulses: The amount of pulses with-in the duration time (default is 5).
============================================
[b]Effect.Squish[/b]
Reduce the element to its top-left corner.
元素左下脚消失效果

Effect.Squish('id_of_element');

===============================================
[b]Effect.Fold [/b]
Reduce the element to its top then to left to make it disappear.
元素先向上收缩后再向左收缩后消失效果！

 Effect.Fold('id_of_element');

=========================================================
[b]Effect.Grow [/b]

 Effect.Grow('id_of_element');

元素显示，效果与生长方式类似，从角落慢慢变大的效果！

================================================
[b]Effect.Shrink [/b]
元素消失效果！

[url]http://wiki.script.aculo.us/scriptaculous/show/CombinationEffects[/url]