用BlueEffects效果库简单实现类似于csdn中的背景颜色渐变的效果

用BlueEffects效果库实现的类似于csdn中的背景颜色渐变的效果，鼠标移过下面的预览区域可以看到效果．

BlueEffects是精灵部落（精灵部落是什么，朋友们可以看看我博客的其它几篇文章，相信你会感兴趣的．）使用的基础效果库，轻量级，各种效果库可以很灵活地分离出来使用，避免了许多其他js框架要使用其效果必须引用一大堆不必要的代码的尴尬局面．同时，BlueEffects在精灵部落的代码中起到了十分重要的作用，精灵部落的所有酷眩效果都是通过BlueEffects来建立的．BlueEffects中的各种效果通过简单组合使用可以产生更过更丰富的效果．关于BlueEffects其实前一段时间写过一篇，文章，估计是因为看起来全是代码，所以关注的朋友并不多吧．今天简单整理一下，在页面上做出一个简单的demo来，有兴趣的朋友希望进一步了解话，可以浏览本文章：把FairyNest当中的基础效果库BlueEffects粗略整理一下发表出来了 ．同时这里再提供一个BlueEffects的下载链接，源代码里面有很详细的注释，谢谢！有兴趣预览更多更眩的效果的朋友，可以去体验一下精灵部落．有必要的话，我会继续在这里连续发布各个基础效果的demo，并尽可能详细的给大家解释用法．
/*************************效果预览区域*****************************/

Item1

Item2

Item3

Item4

Item5

Item6

Item7

/*************************效果预览区域结束*****************************/

下面是实现这个效果的代码．用法其实很简单，但前提肯定要是引用BlurEffects效果库哦。至少应该引用其中的ColorShow效果

 /********************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"});     
     } 

 

下面这是demo中每一个条目的html代码．

<div id="Div1" onmouseover="ColorTest(this)" style="width: 500px; color: #ffffff; line-height: 30px; height: 30px; background-color: #cccccc"  ;>Item1</div>