动画js框架scriptaculous

某项目中使用了scriptaculous这个动画js框架。

scriptaculous是基于prototype框架来编写的，最近的版本是基于prototype1.7的1.9.0，大家有兴趣可以去看下。

官网地址：http://script.aculo.us/

API Documentation and Reference

Core Effects: 
Effect.Highlight, Effect.Morph, Effect.Move, Effect.Opacity, Effect.Scale, Effect.Parallel,
Effect Queues

Combination Effects: 
Effect.Appear, Effect.BlindDown, Effect.BlindUp, Effect.DropOut, Effect.Fade, Effect.Fold, Effect.Grow, Effect.Puff, Effect.Pulsate, Effect.Shake, Effect.Shrink, Effect.SlideDown, Effect.SlideUp, Effect.Squish, Effect.SwitchOff, Effect.ScrollTo

Effect helpers: 
Effect.Transitions, Effect.Methods, Effect.tagifyText, Effect.multiple, Effect.toggle

Behaviours: Draggable, Droppables, Sortable, Form.Element.DelayedObserver

Controls: Ajax.InPlaceEditor, Ajax.InPlaceCollectionEditor, Ajax.Autocompleter, Autocompleter.Local, Slider

Miscellaneous: Builder, Sound, Unit Testing

http://madrobby.github.com/scriptaculous/这个网站详细介绍了每个类库中的方法的用法。

在某系统中，首页的导航用的了此框架Effect类库里的Grow和Shrink方法，实例代码：

for(var i=0;i<el.length;i++){if(el[i].getAttribute("id")){if(el[i].getAttribute("id")!=ele.getAttribute("id")){if(el[i].getAttribute("id").indexOf("bgDiv")<0){//new Effect.Fade(el[i].getAttribute("id"));document.getElementById(el[i].getAttribute("id")).innerHTML = "";new Effect.Shrink(el[i].getAttribute("id"),{duration:0.5,direction: 'center',opacityTransition:Effect.Transitions.linear});}}}}jQuery.getJSON("${ctx}/navigation!loadSmallRes.action",{resId:resId},function(json){if(json){var str="<div class=/"top/" style="/" mce_style="/""background: url('${imgPath}/"+bigicon+"') top no-repeat;/"><ul>";var param = json.param;for(var i=0;i<param.length;i++){str+="<li><a href="/" mce_href="/""javascript:void(0)/" onclick=/"openUrl('${ctx}"+param[i].target+"')/" >"+param[i].name+"</a></li>"}str+="</ul></div>";document.getElementById(e).innerHTML = str;str = null;}//new Effect.Appear(e);new Effect.Grow(e,{duration:0.5,direction: 'center',opacityTransition:Effect.Transitions.linear});});

代码里面做了一些其他div块和按钮图片的处理