script.aculo.us 视觉效果

视觉效果模块带有六核效果：不透明度、缩放、变形、移动、高光和平行。通过这些核心效果的组合，还有超过 16 种附加效果，例如：效果、出现、效果、切换等。

核心效果：

• Effect.Opacity：可用于改变元素的不透明度（透明度）。
• Effect.Scale：可用于垂直或水平向上或向下逐渐缩放元素。
• Effect.Morph：可用于更改元素的 CSS 属性。
• Effect.move ：可用于通过修改其位置属性来移动元素。
• Effect.Highlight：可用于闪烁颜色作为元素的背景。
• Effect.Parallel：可用于将多个核心效果组合成一个并行效果。

附加效果：

• Effect.Appear：使选中的元素出现。
• Effect.Fade：它使元素逐渐消失，最终将其显示属性设置为无
• Effect.Puff：它可以用于从 DOM 中移除元素，然后从中心增长，同时逐渐消失到不可见状态。
• Effect.Dropout：用于从 DOM 中移除元素。
• Effect.Shake：可以在水平方向来回摇动元素。
• Effect.SwitchOff：它可以从顶部和底部向其中心线垂直调整元素的大小，然后将其从 DOM 中移除。
• Effect.BlindDown：可以模拟百叶窗关闭，内容原地不动。
• Effect.BlindUp ：它可以模拟百叶窗，内容保持原位。
• Effect.SlideDown：可以模拟百叶窗向下，内容向下滚动。
• Effect.SlideUp：可以模拟百叶窗向上，内容向上滚动。
• Effect.Pulsate：它可以将元素淡化到零不透明度，然后再变回一五次。
• Effect.Squish：模拟元素被捏到左上角直到消失的效果。
• Effect.Fold：模拟折叠元素的效果。
• Effect.Grow：模拟缩小元素。
• Effect.Shrink：模拟将元素缩小到左上角。
• Effect.Toggle：它允许在隐藏和显示、上滑和下滑、上盲和下盲之间切换。

所有的核心效果器都支持各种常用参数，也有一些效果器具有特定效果器的参数。这些效果名称区分大小写

常用参数：

Options		Description
duration		To specify the duration of the effect (in float)
fps		To specify the number of frames to be targeted in one second
transition		Gives a function that modifies the current points of the animation(between 0 and 1). Available transitions:  Effect.Transitions.sinoidal Effect.Transitions.linear Effect.Transitions.reverse Effect.Transitions.wobble Effect.Transitions.flicker Effect.Transitions.pulse Effect.Transitions.spring Effect.Transitions.none Effect.Transitions.full
from		Sets the starting point of the transition, takes float value between 0 and 1.
to		Sets the endpoint of the transition, takes float value between 0 and 1.
sync		If set to true, you can render frames manually by calling the render() instance method of an effect.  By default, frames render automatically
queue		Can be used to set queuing options
delay	Can be used to set delay in an effect.

例子：

HTML

    
    
    
    
    
        function transitionEffect(element) {
            new Effect.Opacity(element, {
                duration: 2.0,
                transition: Effect.Transitions.linear,
                from: 1.0,
                to: 0.5
            });
        };
    

  
   
    
        Transition
    
       
        Transition of the text 
           (changing opacity)
    

  

输出：

回调方法：还可以为 options 参数提供回调方法，以便您可以在效果运行时在各种事件处执行脚本。回调提供了对效果对象的引用作为参数。

callback	Description
beforeStart	It is called before the effects rendering loop is started.
beforeSetup	It is called before the effect is set up.
afterSetup	It is called after the effect is set up and immediately before the main effects rendering loop is started.
beforeUpdate	It is called on each iteration of the effects rendering loop before redraw takes place.
afterUpdate	It is called on each iteration of the effects rendering loop after redraw takes place.
afterFinish	It is called after the last redraw of the effect was made.

例子：

HTML

    
    
    
    
    
        function OnFinish(div){
            alert("OnFinish called: " + div.element.id);
        }
       
        function OnStart(div){
            alert("OnStart called: " + div.element.id);
        }
       
        function callBackMethods(div){
            new Effect.Highlight(div, 
            {
                duration: 0.5,
                afterFinish: OnFinish,
                beforeStart: OnStart
            }
            );
        }
    

  

    
        callBack
          

  

输出：

属性和方法：

Variable	Description
effect.element	The element on which the effect is applied.
effect.options	It holds the options given to the effect.
effect.currentFrame	It is the number of the frame rendered lastly.
effect.startOn, effect.finishOn	It is the time (in ms) when the effect was started, and when it will be finished.
effect.effects[]	On an Effect.Parallel effect, there’s an effects[] array containing the individual effects the parallel effect is composed of.
effect.cancel()	It is used to stop the effect as is.
effect.inspect()	It is used to get the basic debugging information about the instance.