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

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

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

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

/*
BlueEffects 是一个简单易用的ajax效果库，并且不依赖于任何已知的第三方框架，是独立的全新的，拥有自主版权的
本框架在ie，firefox上测试通过，但并不保证一定准确无误，不对任何使用此框架可能造成的损失负担任何责任。
本版本——1.0
您可以免费使用此框架，前提是您必须在代码中完整的保留本段声明。同时您可以在此框架基础之上做任何您觉得适用
的修改，甚至声 明您对自主修改部分的版权，但不得因为您的部分修改而声明您拥有此框架的版权。同时本框架可以根
据用户实际需要随时提取其中若干效果形成独立的更加轻量级的效果库，但无论如何提取简化，其依然属于本框架范畴，
本段声明依然有效。
作者保留根据相关法律追究违背此声明者责任的权利。
作者：ublue.liao 2008年7月
联系我：email ——ublue2006@163.com——
*/
var BlueEffects={
SizeShow:function(options)
{
if(options.Obj!=null){
var Obj=options.Obj;
Obj.style.overflow="hidden";
var StartWidth=null;
if(options.StartWidth==null||(options.StartWidth!=null&&BlueEffects.IsNum(options.StartWidth)==false))
StartWidth=Obj.offsetWidth ; else StartWidth=options.StartWidth;
var EndWidth=null;
if(options.EndWidth==null||(options.EndWidth!=null&&BlueEffects.IsNum(options.EndWidth)==false))
EndWidth=Obj.offsetWidth ; else EndWidth=options.EndWidth;
var StartHeight=null;
if(options.StartHeight==null||(options.StartHeight!=null&&BlueEffects.IsNum(options.StartHeight)==false))
StartHeight=Obj.offsetHeight ; else StartHeight=options.StartHeight;
var EndHeight=null;
if(options.EndHeight==null||(options.EndHeight!=null&&BlueEffects.IsNum(options.EndHeight)==false))
EndHeight=Obj.offsetHeight; else EndHeight=options.EndHeight;
if(EndHeight<0) EndHeight=0;
var ChangeTime=null;
if(options.ChangeTime==null||(options.ChangeTime!=null&&BlueEffects.IsNum(options.ChangeTime)==false))
ChangeTime=100; else ChangeTime=options.ChangeTime;
if(ChangeTime<10) ChangeTime=10;
var ChangeTimes=null;
if(options.ChangeTimes==null||(options.ChangeTimes!=null&&BlueEffects.IsNum(options.ChangeTimes)==false))
ChangeTimes=5; else ChangeTimes=options.ChangeTimes;
if(ChangeTimes<5) ChangeTimes=5;
if(ChangeTimes>ChangeTime) ChangeTimes=ChangeTime;
var MyTimeOut=null;
var WidthChangeSize=(EndWidth-StartWidth)/ChangeTimes;
var HeightChangeSize=(EndHeight-StartHeight)/ChangeTimes;
var ChangeTimeArea=ChangeTime/ChangeTimes;
var NowWidth=StartWidth;
var NowHeight=StartHeight;
var errState=false;
function ChangeSize()
{
try {
if(WidthChangeSize!=0||HeightChangeSize!=0){
if(WidthChangeSize!=0){
if((EndWidth>StartWidth&&EndWidth-NowWidth<=WidthChangeSize)||(EndWidth=WidthChangeSize)){
NowWidth=EndWidth; Obj.style.width=NowWidth+"px"; }
else{
NowWidth+=WidthChangeSize; Obj.style.width=NowWidth+"px";}
}
if(HeightChangeSize!=0) {
if((EndHeight>StartHeight&&EndHeight-NowHeight<=HeightChangeSize)||(EndHeight=HeightChangeSize)) {
NowHeight=EndHeight; Obj.style.height=NowHeight+"px"; }
else {
NowHeight+=HeightChangeSize; Obj.style.height=NowHeight+"px"; } } } }catch(err){errState=true;}
MyTimeOut=setTimeout(ChangeSize,ChangeTimeArea);
if((NowHeight==EndHeight&& NowWidth==EndWidth)||(WidthChangeSize==0&&HeightChangeSize==0)||errState==true) {
clearTimeout(MyTimeOut); Obj.style.overflow="auto";
if(options.Stop!=null) try{options.Stop();}catch(err){} } }
if(options.Start!=null)try{options.Start();}catch(err){}
ChangeSize(); } },

AlphaShow:function(options)
{
if(options.Obj!=null){
var Obj=options.Obj;
var StartAlpha=null;
if(options.StartAlpha==null||(options.StartAlpha!=null&&BlueEffects.IsNum(options.StartAlpha)==false)) {
StartAlpha=100; }
else StartAlpha=options.StartAlpha;
if(StartAlpha<0) StartAlpha=0;
if(StartAlpha>100) StartAlpha=100;
var EndAlpha=null;
if(options.EndAlpha==null||(options.EndAlpha!=null&&BlueEffects.IsNum(options.EndAlpha)==false))
EndAlpha=100; else EndAlpha=options.EndAlpha;
if(EndAlpha<0) EndAlpha=0;
if(EndAlpha>100) EndAlpha=100;
var ChangeTime=null;
if(options.ChangeTime==null||(options.ChangeTime!=null&&BlueEffects.IsNum(options.ChangeTime)==false)) ChangeTime=100;
else ChangeTime=options.ChangeTime;
if(ChangeTime<10) ChangeTime=10;
var ChangeTimes=null;
if(options.ChangeTimes==null||(options.ChangeTimes!=null&&BlueEffects.IsNum(options.ChangeTimes)==false)) ChangeTimes=5;
else ChangeTimes=options.ChangeTimes;
if(ChangeTimes<5) ChangeTimes=5;
if(ChangeTimes>ChangeTime) ChangeTimes=ChangeTime;
var MyTimeOut=null;
var ChangeSize=(EndAlpha-StartAlpha)/ChangeTimes;
var ChangeTimeArea=ChangeTime/ChangeTimes;
var NowAlpha=StartAlpha;
var errState=false;
function ChangeAlpha(){
try{
NowAlpha+=ChangeSize;
if((EndAlpha>StartAlpha&&EndAlpha-NowAlpha<=ChangeSize)||(EndAlpha=ChangeSize)){
NowAlpha=EndAlpha;
Obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity="+NowAlpha+")" ;
Obj.style.MozOpacity=NowAlpha/100; }
else{
Obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity="+NowAlpha+")" ;
Obj.style.MozOpacity=NowAlpha/100; } }catch(err){errState=true;}
MyTimeOut=setTimeout(ChangeAlpha,ChangeTimeArea);
if(NowAlpha==EndAlpha||errState==true){
clearTimeout(MyTimeOut);
if(options.Stop!=null)try{options.Stop();}catch(err){} } }
if(options.Start!=null) try{options.Start();}catch(err){}
ChangeAlpha(); } },
Move:function(options){
if(options.Obj!=null){
var Obj=options.Obj;
Obj.style.position="absolute";
var StartX=null;
if(options.StartX==null||(options.StartX!=null&&BlueEffects.IsNum(options.StartX)==false)){
try{StartX=Obj.offsetLeft}catch(err){StartX=0;} }
else StartX=options.StartX;
var EndX=null;
if(options.EndX==null||(options.EndX!=null&&BlueEffects.IsNum(options.EndX)==false)) EndX=100;
else EndX=options.EndX;
var StartY=null;
if(options.StartY==null||(options.StartY!=null&&BlueEffects.IsNum(options.StartY)==false)) {
try { StartY=Obj.offsetTop;}catch(err){StartY=0;} }
else StartY=options.StartY;
var EndY=null;
if(options.EndY==null||(options.EndY!=null&&BlueEffects.IsNum(options.EndY)==false)) EndY=0;
else EndY=options.EndY;
var ChangeTime=null;
if(options.ChangeTime==null||(options.ChangeTime!=null&&BlueEffects.IsNum(options.ChangeTime)==false)) ChangeTime=100;
else ChangeTime=options.ChangeTime;
if(ChangeTime<10) ChangeTime=10;
var ChangeTimes=null;
if(options.ChangeTimes==null||(options.ChangeTimes!=null&&BlueEffects.IsNum(options.ChangeTimes)==false)) ChangeTimes=5;
else ChangeTimes=options.ChangeTimes;
if(ChangeTimes<5) ChangeTimes=5;
if(ChangeTimes>ChangeTime) ChangeTimes=ChangeTime;
var MyTimeOut=null;
var XChangeSize=(EndX-StartX)/ChangeTimes;
var YChangeSize=(EndY-StartY)/ChangeTimes;
var ChangeTimeArea=ChangeTime/ChangeTimes;
var NowX=StartX;
var NowY=StartY;
var errState=false;
function ChangePosition(){
try{ if(XChangeSize!=0) {
if((EndX>StartX&&EndX-NowX<=XChangeSize)||(EndX=XChangeSize)){
NowX=EndX;
Obj.style.left=NowX+"px"; }
else{
NowX+=XChangeSize;
Obj.style.left=NowX+"px"; } }
if(YChangeSize!=0){
if((EndY>StartY&&EndY-NowY<=YChangeSize)||(EndY=YChangeSize)) {
NowY=EndY;
Obj.style.top=NowY+"px"; }
else {
NowY+=YChangeSize;
Obj.style.top=NowY+"px"; } } }catch(err){errState=true;}

MyTimeOut=setTimeout(ChangePosition,ChangeTimeArea);
if((NowX==EndX&& NowY==EndY)||errState==true) {
clearTimeout(MyTimeOut);
if(options.Stop!=null)try{options.Stop();}catch(err){} } }
if(options.Start!=null) try{options.Start();}catch(err){}
ChangePosition(); } },
Drag:function(options){
if(options.DragBar!=null) {
var DragBar=options.DragBar;
var DragObj=null;
if(options.DragObj!=null) DragObj=options.DragObj;
else DragObj=DragBar;
var DragState="DragWait";
var X;
var Y;
var StartX;
var StartY;
function Mousedown(event){
DragObj.style.position="absolute";
DragState="DragStarted";
DragBar.style.cursor="move";
if(event.offsetX == null) X=event.clientX-event.layerX;
else X=event.clientX-event.offsetX;
if(event.offsetY == null) Y=event.clientY-event.layerY;
else Y=event.clientY-event.offsetY;
StartX=event.clientX;
StartY=event.clientY;
BlueEffects.addEvent(document,"mousemove",Mousemove);
BlueEffects.addEvent(document,"mouseup",Mouseup);
BlueEffects.ShowDragCover();
if(options.Start!=null){try{options.Start();}catch(err){} } }
function Mousemove(event){
if(DragState=="DragStarted") {
var tempX=event.clientX-StartX;
var tempY=event.clientY-StartY;
DragObj.style.left=(X+tempX)+"px";
DragObj.style.top=(Y+tempY)+"px";
if(options.Move!=null){try{options.Move();}catch(err){}} } }
function Mouseup(event) {
DragState="DragEnded";
BlueEffects.removeEvent(document,"mousemove",Mousemove);
BlueEffects.removeEvent(document,"mouseup",Mouseup);
BlueEffects.HideDragCover();
if(options.Stop!=null){try{options.Stop();}catch(err){} } } }
BlueEffects.addEvent(DragBar,"mousedown",Mousedown);
},
ColorShow:function(options){
if(options.Obj!=null&&options.Colors!=null){
var Obj=options.Obj;
var TempColors=options.Colors;
var Colors=[];
if(TempColors.length>=2) {
var pattern = /^#[0-9a-fA-F]{6}$/;
for(var i=0;i=2){
var TimeSpace=0;
if(options.TimeSpace!=null&&BlueEffects.IsNum(options.TimeSpace)==true) TimeSpace=options.TimeSpace;
else TimeSpace=10;
if(TimeSpace<5) TimeSpace=5;
var MyTimeOut=null;
var NowIndex=0;
var errState=false;
function ChangeColorASC(){
try{
if(options.BackGround==true) Obj.style.backgroundColor=Colors[NowIndex];
if(options.Border==true) Obj.style.borderColor=Colors[NowIndex];
if(options.Color==true) Obj.style.color=Colors[NowIndex];
if(options.BackGround!=true&&options.Border!=true&&options.Color!=true) Obj.style.backgroundColor=Colors[NowIndex];
}catch(err){errState=true;}
MyTimeOut=setTimeout(ChangeColorASC,TimeSpace);
NowIndex++;
if(NowIndex==Colors.length||errState==true) {
clearTimeout(MyTimeOut);
if(options.Stop!=null) try{options.Stop();}catch(err){} } }
if(options.Start!=null)try{options.Start();}catch(err){}
ChangeColorASC(); } } },
ImageShow:function(options){
if(options.Obj!=null&&options.Images!=null){
var Obj=options.Obj;
var TempImages=options.Images;
var Images=[];
if(TempImages.length>=2){
var imgType;
try {
for(var i=0;i=2){
var TimeSpace=0;
if(options.TimeSpace!=null&&BlueEffects.IsNum(options.TimeSpace)==true) TimeSpace=options.TimeSpace;
else TimeSpace=10;
if(TimeSpace<5) TimeSpace=5;
var MyTimeOut=null;
var NowIndex=0;
var errState=false;
function ChangeImageASC(){
try{
if(options.BackGround==true){
if(Images[NowIndex].Image!=null) Obj.style.backgroundImage="url("+Images[NowIndex].Image+")";
if(Images[NowIndex].Position!=null) Obj.style.backgroundPosition=Images[NowIndex].Position;
if(Images[NowIndex].PositionX!=null) Obj.style.backgroundPositionX=Images[NowIndex].PositionX;
if(Images[NowIndex].PositionY!=null) Obj.style.backgroundPositionY=Images[NowIndex].PositionY;
if(Images[NowIndex].Repeat!=null&&(Images[NowIndex].Repeat=="repeat"||Images[NowIndex].Repeat=="no-repeat"||Images[NowIndex].Repeat=="repeat-x"||Images[NowIndex].Repeat=="repeat-y"))
Obj.style.backgroundRepeat=Images[NowIndex].Repeat;}
if(options.Src==true){
if(Images[NowIndex].Image!=null) Obj.src=Images[NowIndex].Image;
if(Images[NowIndex].Width!=null&&BlueEffects.IsNum(Images[NowIndex].Width)==true) Obj.style.width=Images[NowIndex].Width+"px";
if(Images[NowIndex].Height!=null&&BlueEffects.IsNum(Images[NowIndex].Height)==true) Obj.style.height=Images[NowIndex].Height+"px"; }
if(options.BackGround!=true&&options.Src!=true){
if(Images[NowIndex].Image!=null) Obj.style.backgroundImage="url("+Images[NowIndex].Image+")";
if(Images[NowIndex].Position!=null) Obj.style.backgroundPosition=Images[NowIndex].Position;
if(Images[NowIndex].PositionX!=null) Obj.style.backgroundPositionX=Images[NowIndex].PositionX;
if(Images[NowIndex].PositionY!=null) Obj.style.backgroundPositionY=Images[NowIndex].PositionY;
if(Images[NowIndex].Repeat!=null&&(Images[NowIndex].Repeat=="repeat"||Images[NowIndex].Repeat=="no-repeat"||Images[NowIndex].Repeat=="repeat-x"||Images[NowIndex].Repeat=="repeat-y"))
Obj.style.backgroundRepeat=Images[NowIndex].Repeat; } }catch(err){errState=true;}
MyTimeOut=setTimeout(ChangeImageASC,TimeSpace);
NowIndex++;
if(NowIndex==Images.length||errState==true) {
clearTimeout(MyTimeOut);
if(options.Stop!=null)try{options.Stop();}catch(err){} } }
if(options.Start!=null) try{options.Start();}catch(err){}
ChangeImageASC(); } } },
ReSize:function(options){
if(options.ReSizeBar!=null){
var ReSizeBar=options.ReSizeBar;
var ReSizeObj=null;
if(options.ReSizeObj!=null) ReSizeObj=options.ReSizeObj;
else ReSizeObj=ReSizeBar;
var XResize=null;
if(options.XResize!=null&&options.XResize==false) XResize=false;
else XResize=true;
var YResize=null;
if(options.YResize!=null&&options.YResize==false) YResize=false;
else YResize=true;
var ReSizeState="ReSizeWait";
var X;
var Y;
var StartX;
var StartY;
function Mousedown(event) {
ReSizeState="ReSizeStarted";
if(XResize==true&&YResize==true) ReSizeBar.style.cursor="nw-resize";
else if(XResize==true) ReSizeBar.style.cursor="e-resize";
else if(YResize==true) ReSizeBar.style.cursor="n-resize";
X=ReSizeObj.offsetWidth;
Y=ReSizeObj.offsetHeight;
StartX=event.clientX;
StartY=event.clientY;
BlueEffects.addEvent(document,"mousemove",Mousemove);
BlueEffects.addEvent(document,"mouseup",Mouseup);
BlueEffects.ShowDragCover();
if(options.Start!=null){try{options.Start();}catch(err){}} }

function Mousemove(event) {
if(ReSizeState=="ReSizeStarted") {
var tempX=event.clientX-StartX;
var tempY=event.clientY-StartY;
try{ if(XResize==true) ReSizeObj.style.width=(X+tempX)+"px";
if(YResize==true) ReSizeObj.style.height=(Y+tempY)+"px"; }catch(err){}
if(options.Move!=null){ try{options.Move();}catch(err){}} } }
function Mouseup(event) {
ReSizeState="ReSizeEnded";
BlueEffects.removeEvent(document,"mousemove",Mousemove);
BlueEffects.removeEvent(document,"mouseup",Mouseup);
BlueEffects.HideDragCover();
if(options.Stop!=null){
try {options.Stop(); }catch(err){}} }
BlueEffects.addEvent(ReSizeBar,"mousedown",Mousedown); } },
IsNum:function(input){
var re = /^-?[0|1-9]\d*$/;
if (!re.test(input))
return false;
else
return true;
},
addEvent:function(o, t, f) {
if (o.addEventListener) o.addEventListener(t, f, false);
else if (o.attachEvent) o.attachEvent('on'+ t, f);
else o['on'+ t] = f;
},

removeEvent:function(o, t, f) {
if (o.removeEventListener) o.removeEventListener(t, f, false);
else if (o.detachEvent) o.detachEvent('on'+ t, f);
else o['on'+ t] = null;
},

ShowDragCover:function ()
{
var cover=document.getElementById("dragcover");
if(cover==null)
cover=BlueEffects.CreateDragCover();
cover.style.display="block";
cover.style.height=document.body.clientHeight;
cover.style.width=document.body.clientWidth;
},

SetDragCoverZindex:function(zindex)
{
var cover=document.getElementById("dragcover");
if(cover!=null)
cover.style.zIndex=zindex;
},

HideDragCover:function()
{
var cover=document.getElementById("dragcover");
if(cover==null)
cover=BlueEffects.CreateDragCover();
cover.style.display="none";
},

CreateDragCover:function()
{
var cover = document.createElement("div");
cover.setAttribute('id', "dragcover");
cover.style.height=document.body.clientHeight;
cover.style.width=document.body.clientWidth;
cover.style.zIndex=50000;
cover.style.position="absolute";
cover.style.backgroundColor="#000000";
cover.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=0)" ;
cover.style.MozOpacity=0;
cover.style.display="none";
try{ document.body.insertBefore(cover, document.body.firstChild); return cover;}catch(err){alert("document.body对象不能为空"); return null;}
},

getCurrentSize:function(options)
{
var testClass=options.testClass?options.testClass:null;
var reData={width:0,height:0};
var temp = document.createElement("div");
temp.setAttribute('id', "testClass");
temp.className=testClass;
try{
document.body.insertBefore(temp,document.body.firstChild);
reData.width=temp.offsetWidth;
reData.height=temp.offsetHeight;
document.body.removeChild(temp);
return reData;
}catch(err){alert("document.body对象不能为空"); return null;}
}
};

/*****************************************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=["#eeeeee","#e1e1e1","#cccccc","#c1c1c1","#aaaaaa","#a1a1a1","#888888","#818181","#777777"];
BlueEffects.ColorShow({Obj:obj,Colors:Colors,TimeSpace:50,ChangeType:"background"});
}

Item1
Item2
Item3
Item4
Item5
Item6
Item7

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

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

Code

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