把FairyNest当中的基础效果库BlueEffects粗略整理一下发表出来了
BlueEffects是我上一篇文章中提到的webos中使用的基础效果库，轻量级，也很简单易用。
不过很抱歉的是本来打算要整理出来一个比较详细的文档给大家看，可这两天过节都过昏了头了，耽误了不少时间。怕有兴趣的朋友等着着急了，今天上午赶出来一个简单的demo ，先贴出来大家看看看。查看页面的源文件可以看到比较详细的使用方法注释。这两天我可能会更新这篇文章，把最新的比较详细的文档放上来，或者会新发一篇文章做补充。
另外demo中做出来的几个例子都是很基础的，实际使用当中大家可以很灵活的搭配几种效果实现更加复杂的动画，我也会考虑继续添加一些例子上来，也欢迎感兴趣的朋友和我一起探讨。
下面贴上一段demo中使用BlueEffects的代码，可以看得出使用起来比较简单方便。
<script type="text/javascript">
/*****************************************SizeShowTest*************************************************/
function TurnToBig()
{
var Obj=document.getElementById("SizeShowObj");
BlueEffects.SizeShow({Obj:Obj,EndWidth:150,EndHeight:150,ChangeTime:20,ChangeTimes:5,Stop:TurnToSmall});
/*
Obj，就是将要SizeShow的对象了；
EndWidth，就是Obj经过SizeShow以后将要变成的宽度。如果没有使用下面提到的可选参数中的StartWidth，则将从Obj的实际宽度
开始变化到EndWidth；
EndHeight，跟EndWidth是一个道理，只不过只的是对象的高度；
ChangeTime，用于设定SizeShow过程的时间，以豪秒为单位，即你希望这个动画过程运行多长时间完成。实际运行情况可能会因为浏览
器中js的运行效率不同而有所不同，这个大家应该在使用的过程中再自行把握；
ChangeTimes，用于设定SizeShow对象在SizeShow过程当中ChangeTime时间范围内变化的次数。就以flash动画中的桢打比方，同样
5秒钟的动画，可以由5桢组成，也可以由10桢组成，或者有其他数量的桢组成，每一桢都是一个不同的变化状态，在连续不断的变化过程
当中就给人的视觉造成动画的效果了。ChangeTimes就是起设定桢数的作用。在同样5秒的动画时间中，桢数越多，那么动画的效果给人
感觉也将更加流畅，但是同时也很可能会降低js的执行效率并延长动画的时间，具体使用时ChangeTime和ChangeTimes应该怎么搭配使用
就完全看用户个人把握了。
Stop，设订一个在本SizeShow结束时调用的方法，这个算是可的参数。
还有三个在本例中没有体现出来的可选参数：StartWidth,StartHeight,Start;
StartWidth，表示起始宽度，当设定了此参数的时候，SizeShow对象其实际宽度为多少，都将从StartWidth开始变化，
StartHeight，跟StartWidth一个道理；
Start，是一个在SizeShow刚开始时执行的函数，类似于这里用到了的Stop是指在SizeShow结束时执行的函数，有了这两个参数，
SizeShow方法使用起来就更灵活了，你可以让一个SizeShow结束以后调用另一个SizeShow或者其他效果，形成更加复杂的动画效果
具体使用，我这里就不多累述了，大家可以自己拿着去测试，也可以尝试修改着使用。
另外，实际使用过程当中，除了Obj是必须的参数以外，其他所有参数如果不加以设定的话，都是没有关系的，BlueEffects.SizeShow
为各个参数都设定了默认值，但是如果EndHeight与EndWidth都没有设定的话，将看不到任何效果，实际上BlueEffects.SizeShow判断
到没有需要执行的动画效果以后，就会立即停止运行。
此外，很明显像Obj这个参数应该被设定成一个确实能够在dom元素中找到的dom对象，StartWidth、EndWidth、StartHeight、
EndHeight、ChangeTime、ChangeTimes都应该被设定为整数，Start、Stop应该被设定为可执行的函数；BlueEffects.SizeShow
虽然做了一些容错的工作，但如果使用过程当中太不讲究，也很难保证运行不会出错。
BlueEffects 的其他效果也都类似，希望大家如果使用这里面的效果的话，参数设定的时候一定要讲究一下基本的规则，谢谢！！
*/
}
function TurnToSmall()
{
var Obj=document.getElementById("SizeShowObj");
BlueEffects.SizeShow({Obj:Obj,EndWidth:100,EndHeight:100,ChangeTime:20,ChangeTimes:5});
}
/******************************************MoveTest****************************************************/
function Move()
{
var Obj=document.getElementById("MoveObj");
BlueEffects.Move({Obj:Obj,EndX:1000,EndY:500,ChangeTime:100,ChangeTimes:10,Stop:MoveStop});
/*
BlueEffects.Move的参数设定说明可以参考上面 BlueEffects.SizeShow的说明。
不同的主要是EndX、EndY，还有可选的StartX、StartY，分别表示Move停止的X坐标于Y坐标，以及开始的x坐标与y坐标；
*/
}
function MoveStop()
{
BlueEffects.Move({Obj:document.getElementById("MoveObj"),EndX:460,EndY:65,ChangeTime:50,ChangeTimes:10});
}
/*****************************************AlphaShowTest*************************************************/
function AlphaShow()
{
var Obj=document.getElementById("AlphaShowObj");
BlueEffects.AlphaShow({Obj:Obj,EndAlpha:0,ChangeTime:500,ChangeTimes:10,Stop:AlphaShowStop});
/*
BlueEffects.AlphaShow的参数设定说明可以参考上面 BlueEffects.SizeShow的说明。
不同的主要是EndAlpha还有可选的StartAlpha，分别表示AlphaShow停止的透明度，以及开始的透明度；透明度应该是0-100间的整数。
StartAlpha没有设定的情况下，默认从100即正常完全不透明状态下开始。
*/
}
function AlphaShowStop()
{
var Obj=document.getElementById("AlphaShowObj");
BlueEffects.AlphaShow({Obj:Obj,StartAlpha:0,EndAlpha:100,ChangeTime:500,ChangeTimes:10});
}
/*****************************************ColorShowTest*************************************************/
function ColorTest(obj)
{
var Colors=["#999999","#888888","#777777","#666666","#555555","#444444","#333333","#222222","#111111"];
BlueEffects.ColorShow({Obj:obj,Colors:Colors,TimeSpace:50});
/*
BlueEffects.ColorShow的参数设定说明可以参考上面 BlueEffects.SizeShow的说明。
不过这个跟SizeShow还是有很大不同的
首先必须要设定一个颜色数组，BlueEffects.ColorShow将按照数组中设定的顺序改变对象的颜色。
TimeSpace，用来设定每两次颜色变化之间的时间间隔。
还有几个这里没有体现出来的可选择的参数：
Start、Stop，这个用法跟前面的介绍都是一样的
BackGround 当参数中设定了BackGround：true的时候， BlueEffects.ColorShow在改变对象颜色的时候，将改变对象的背景颜色
Border 当参数中设定了Border：true的时候， BlueEffects.ColorShow在改变对象颜色的时候，将改变对象的边线颜色
Color 当参数中设定了Color：true的时候， BlueEffects.ColorShow在改变对象颜色的时候，将改变对象中包含的文字的颜色
BackGround、Border、Color三个参数搭配起来使用，可以灵活的实现想要的颜色动画效果。当这三个参数没有任何一个被设定的时候，
将默认改变BackGround。
*/
}
function ColorTest2(obj)
{
var Colors=["#999999","#888888","#777777","#666666","#555555","#444444","#333333","#222222","#111111"];
BlueEffects.ColorShow({Obj:obj,Colors:Colors,TimeSpace:50,ChangeType:"background"});
}
/*****************************************DragTest*****************************************************/
function Drag()
{
BlueEffects.Drag({DragBar:document.getElementById("DragObj")});
BlueEffects.Drag({DragBar:document.getElementById("DragBar"),DragObj:document.getElementById("DragParent")});
/*
DragBar，设定你想要拖拽的对象，即你希望鼠标能够通过抓住它而进行拖拽的那个dom元素对象，这个是必须设定的对象。
DragObj，设定你想要连带拖动的对象。即当你用鼠标抓中DragBar并拖动时，会被一起拖动的对象。但是当你用鼠标抓住DragObj时，是不能
拖动的，你只能通过抓中DragBar来拖动DragObj，这一点很重要，也很有用。通过页面的例子，相信大家都很容易理解。
另外还有三个这里没有体现的可选参数
Start、Stop跟前面的都类似，不多说了
Move，用来设定一个在拖动过程当中要附带执行的函数。
另外，类似于 BlueEffects.Drag，BlueEffects中还有一个很有用的BlueEffects.ReSize。这里没有做实例
基本用法就如：
BlueEffects.ReSize({ReSizeBar:document.getElementById("Div8"),ReSizeObj:document.getElementById("Div9")});
还有几个可选参数
XResize，当设定了XResize:true 的时候,将只能拖动并ReSize ReSizeObj的宽度
YResize，当设定了YResize:true 的时候,将只能拖动并ReSize ReSizeObj的高度
都不设定的时候，则高度和宽度都能 ReSize
同样还有Start、Stop、Move三个可选的参数。
*/
}
</script>
下面是demo的下载链接