动画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)/" οnclick=/"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块和按钮图片的处理