scriptaculous 效果集合

包含以下几个部分： 
builder.js ：提供了一种方便的建立html元素的方法 
controls.js ：包含自动提示和动态编辑两个控件 
dragdrop.js ： 提供元素拖放的功能 
effects.js ： 设计优良的ajax效果库，这篇文章要讲的就是这个 
slider.js ： 一个滑动条控件  

 

 

消失效果

new Effect.Puff("img"); //放大后消失

new Effect.Squish('img'); //元素左上脚消失效果

new Effect.Fold('img');  //元素先向上收缩后再向左收缩后消失

new Effect.Shrink('img'); //在中心点消失

new Effect.DropOut('img');//让元素掉下去一样的消失

new Effect.Fade('img');//逐渐隐藏元素

显示效果

new Effect.Appear("img"); //逐渐显示出隐藏元素

 

变化效果

new Effect.SwitchOff('img');//收缩至左中点

new Effect.BlindDown('img');//左上角顶点向下展开

new Effect.BlindUp('img');//收缩至左上角顶点

new Effect.Scale("img",200); //变大200%。也可变小

new Effect.Grow('img'); //中心点逐渐变大

new Effect.Opacity('img', {duration:1.5,from:1.0,to:0.1});  //透明度变化

移动效果

new Effect.Move('img',{x:20,y:-30,mode:'relative'});//移动

其它效果

new Effect.Pulsate('img'); //元素跳动闪烁效果

new Effect.Shake('img');//元素左右震动效果

new Effect.Highlight('content');//高亮效果

new Effect.Morph('content',{style:'background:#f00;color:#fff;font-size:2em',duration:3.9}); //样式变化

//联合多个效果核心效果，一系列效果

var oAnimation = new Effect.Parallel([

new Effect.Move("volumetrack",{x:-100,y:100,sync:true}),

new Effect.Opacity("volumetrack",{from:0.0,to:0.9,sync:true})

],{

transition:Effect.Transitions.linear,

duration:2.0

});