用BlueEffects效果库实现的类似于csdn中的背景颜色渐变的效果,鼠标移过下面的预览区域可以看到效果.
BlueEffects是精灵部落(精灵部落是什么,朋友们可以看看我博客的其它几篇文章,相信你会感兴趣的.)使用的基础效果库,轻量级,各种效果库可以很灵活地分离出来使用,避免了许多其他js框架要使用其效果必须引用一大堆不必要的代码的尴尬局面.同时,BlueEffects在精灵部落的代码中起到了十分重要的作用,精灵部落的所有酷眩效果都是通过BlueEffects来建立的.BlueEffects中的各种效果通过简单组合使用可以产生更过更丰富的效果.关于BlueEffects其实前一段时间写过一篇,文章,估计是因为看起来全是代码,所以关注的朋友并不多吧.今天简单整理一下,在页面上做出一个简单的demo来,有兴趣的朋友希望进一步了解话,可以浏览本文章:把FairyNest当中的基础效果库BlueEffects粗略整理一下发表出来了
.同时这里再提供一个BlueEffects的下载链接,源代码里面有很详细的注释,谢谢!有兴趣预览更多更眩的效果的朋友,可以去体验一下精灵部落.有必要的话,我会继续在这里连续发布各个基础效果的demo,并尽可能详细的给大家解释用法.
/*************************效果预览区域*****************************/
Item1
Item2
Item3
Item4
Item5
Item6
Item7
/*************************效果预览区域结束*****************************/
下面是实现这个效果的代码.用法其实很简单,但前提肯定要是引用BlurEffects效果库哦。至少应该引用其中的ColorShow效果
Code
/********************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代码.
Code
<div id="Div1" onmouseover="ColorTest(this)" style="width: 500px; color: #ffffff; line-height: 30px; height: 30px; background-color: #cccccc" ;>Item1</div>