英文原版作者：Avinash Vora
英文地址：http://www.avinashv.net/tutorials/moofx/
最新更新时间:2006年2月17日
中文翻译：作者：Liceven
Email:fexianyexin@163.com
Blog:http://yexin218.cublog.cn
Date：2008/01/07
一、简介
Moo.fx 是一个少于5分钟的工作量就可以让你把它添加到网页当中的超级轻量级的javascript特效库（3k左右）. 它的跨浏览器、速度快、体积小的特性能够为你的网页做出出色的美化。
让我们开始接触它吧，如果你想利用moo.fx让你的网页变得更酷。而一旦你明白了它的工作原理，这一切就可以实现了。在你阅读这篇文章之后，你应该就可以让你网页拥有跟你在这里看到的相同的时髦特效了。
想要真正了解这种特效如何运作的，一个基本的对HTML的了解是很重要的，此外CSS以及任何脚本知识也将是对了解网页代码背后如何运作的一个关键。但是出于各种意图或者目的，大部分的代码也只不过是一个拷贝和张贴的化身。
二、磨枪必备
首先，你需要准备一些工具。下载：
l Moo.fx.js, prototype.lite.js (下载地址)
本站下载地址，含moo.fx.pack.js：
moo.fx.rar （6.36 KB）
l 代码编辑器,最好带语法加亮显示的(建议用Editplus)。
你也可以下载以下一些工具(可选)：
l Markup验证器(下载地址)
l Firefox + Web Developer Extension(下载地址)
l JavaScript 控制台(Web Developer Extension提供了这个功能)
一旦准备好了你需要的(其实不多的),就可以开始上阵了。在你对moo.fx做任何操作之前，建立一个好的，容易上手的页面。以下是一个关于XHTML 1.0的页面代码例子：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<p>Lorem ipsum.</p>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed metus quis arcu tempus condimentum. Aenean eu odio. Mauris vehicula dui ut massa. In ac.</p>
</div>
</div>
</body>
</html>
上面的代码为页面建立一个基本结构框架。所有的代码都是合乎语法有效的，这一点尤其重要： 许多时候弹出错误提示仅仅因为一个不合法的标记，有效的合乎语义的标记从不为过。
三、冲锋陷阵
是练兵的时候。正如你在这里所看到的一个平稳滑动效果，做到这一点不是很困难的。
找到两个之前你下载的以“.js”结尾的脚本文件，放在一个合适的位置(比如放在application 的根目录中).这样就能很方便地链接到这两个文件。
在你建立的网页中的<head>部分中加入以下代码：
<script type="text/javascript" src="moo.fx.js"></script>
<script type="text/javascript">
// This is where you will initialize your effects
</script>
头两行加载这个特效将要用到的基本类库。这两行是必须的，路径可以是相对或者绝对的。第三行的java脚本用来初始化你想要的每一个特效。
为什么不添加一个新的特效呢？把下面的脚本代码拷贝到<script type="text/javascript"></script>之间：
var containerHeight;
window.onload = function() {
containerHeight = new fx.Height('container', {duration: 400});
}
这些代码对任何拥有javascript知识的来说，已不要再加解释了。不过那些初学者来说：window.onload 是在页面加载的时候被触发一个事件。也正是这个时候，我们例子当中的moo.fx特效被初始化的时候。第二行是用于创建一个新的特效的基本声明。基本语法如下：
很简单，对吧。idToAffect 是定义在HTML中而你想要赋予它特效的一个元素。在我们的初始代码中，这个id就是是container. 你唯一需要注意的是 duration: 以MilliSeconds为单位。
特效命名（通常是代码中任何变量）是很重要的。可以用cameicase,来命名一个你想要创建特效的id.
要正在实现特效，还必须调用特效中的taggle()函数。一个简单方法，也正是我们这个特效的一部分。通常我们使用的是onlick事件来触发调用这个函数。以下是一个完整的关于heigh特效的程序清单：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>moo.fx Effects Test</title>
<script type="text/javascript" src="prototype.lite.js"></script>
<script type="text/javascript" src="moo.fx.js"></script>
<script type="text/javascript">
// Initialise the effects
var containerHeight;
window.onload = function() {
containerHeight = new fx.Height('container', {duration: 400});
}
</script>
</head>
<body>
<div id="wrapper">
<p onclick="containerHeight.toggle();">Lorem ipsum.</p>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed metus quis arcu tempus condimentum. Aenean eu odio. Mauris vehicula dui ut massa. In ac.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed metus quis arcu tempus condimentum. Aenean eu odio. Mauris vehicula dui ut massa. In ac.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed metus quis arcu tempus condimentum. Aenean eu odio. Mauris vehicula dui ut massa. In ac.</p>
</div>
</div>
</body>
</html>
Ta-da，你可以浏览一下效果。很显然它不是最亮的，但是无疑将是你见过最酷的。你可以继续修改以上代码直到你满意为止：更多的特效、一个完整的页面等等。
四、深入敌区
Moo.fx要比你见到的更加强大。除了包含fx.Heigh,在moo.fx.js中还有其他三种基本效果：
l fx.Height
l fx.Widht
l fx.Opacity
不需要解释了，实现其中一个或者多个特效已经不是额外负担的工作了，除了重新编写你特效的初始话的部分代码。尝试去做，你现在应该更能干。
虽然在moo.fx文档中已经有完整的关于方法和选项的列表，个人觉得一个非常有用的方法：hide(). 这个方法允许你将你想要的特效部分立即隐藏起来。假如在window.onload调用时，它将实现将这部分内容隐藏起来，而然后调用taggle()才将这部分内容显示出来。这个页面就是很好的扩展了这个方法。
Moo.fx.pack.js 是moo.fx的扩展。Moo.fx提供了绑定的特效(combined effects),基于cooke的特效(cookie-based effects)等等，可是它仍然很小，大约在6k左右，却更加优越灵活，同样，有了基础知识，这部分应该也不是很难掌握的。
有一些值得推荐的资源：
l moo.fx网站：http://moofx.mad4milk.net/
l moo.fx文档：http://moofx.mad4milk.net/documentation/
最后，不要放弃。这不是一个简单的起步概念，尤其对于那些刚接触编程的初学者。找出常见的错误：不合乎语法的标记，漏了分号，误拼了变量名。阅读moo.fx文档，时时关注最新的bug修复。网页设计总是熟能生巧的。
五、结束语
指南中的代码可以自由使用。虽然没有要求，但是任何信用举动都是值得赞赏的。Email(avinashvora@gmail.com)给我你的意见、问题、以及你的杰作。我不是JavaScript方面的专家，但将尽力帮助你解决问题。
请稍等，评论加载中...