Wenshu dBlog

星期六, 十月 07, 2006

moo.fx

moo.fx是一个超轻量级的js库,在网络上已经广泛使用,用于产生一些客户端效果,说他轻量级,是因为他只需要有三个文件:
 prototype.lite.js - 3k
 moo.fx.js - 3k
 moo.fx.pack.js - 6k
prototype其实是另一个js库,moo.fx依赖于它,但prototype过于庞大,因此moo.fx提供了一个简化的实现,所以叫做 prototype.lite.js(当然直接使用原版的prototype也可以),另外两个文件则是moo.fx的实现文件,moo.fx.js实现 了基本的三个效果,moo.fx.pack.js实现了基于moo.fx.js的组合效果,因此如果不需要这些组合效果的话,甚至 可以不需要moo.fx.pack.js,这样更加轻巧。

moo.fx实现的效果其实很简单,动态修改Html tag的width,height和transparent,但应用却非常广泛,比如一些滑动的菜单(slidebar),一些渐入渐出(fade in, fade out)。而且实现起来很简单,如果只有一组或几组tag需要使用这些特效的话,只需要moo.fx.js和prototype.lite.js就可以 了,但如果是多组的特效,最好再加上moo.fx.pack.js,它可以使用简单的语法来同时支持多组特效,下面几句话搞定:
<script type="text/javascript">
    var myToggler = document.getElementsByClassName("toggler");
    var myWork = document.getElementsByClassName("work");
    var myFX = new fx.Accordion(myToggler, myWork, {height:true, opacity:false, duration:400});
</script>

2 Comments:

  • 大哥,这个应该贴到Wenshu cBlog,而不是 Wenshu dBlog 。

    By Blogger 乡下大哥, at 12:30 下午  

  • hoho, 这个属于交叉学科 :) 我的分类方法是 Drawing和Design都放在 d 下面,而CSS/HTML/Javascript被我归结到Web Desigh,所以,。。。

    By Blogger wenshu, at 2:02 下午  

发表评论

<< Home