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

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

Item1
Item2
Item3
Item4
Item5
Item6
Item7


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

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

     
     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代码.


 

相关文章:

  • 2022-12-23
  • 2021-09-26
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-10
  • 2022-12-23
猜你喜欢
  • 2021-12-22
  • 2022-12-23
  • 2022-03-01
  • 2022-12-23
  • 2021-12-14
  • 2021-07-28
相关资源
相似解决方案