[仿照CloudGamer]写的颜色渐变
Code<html>
<head>
<title>Color渐变</title>
<script type="text/javascript">
//获取dom对象
function $(id)
{
return "string"==typeof id?document.getElementById(id):id;
}
//创建新的类
function New(aClass,aParams)
{
function new_()
{
aClass.Create.apply(this,aParams);
}
new_.prototype=aClass;
return new new_();
}
//绑定事件
function addEventHandler(obj,eventType,handler)
{
if(obj.addEventListener)
{
obj.addEventListener(eventType,handler,false);
}
else if(obj.attachEvent)
{
obj.attachEvent("on"+eventType,handler);
}
else
{
obj["on"+eventType]=handler;
}
}
//将函数与对象挂钩
function Bind(obj,fun)
{
return function()
{
return fun.call(obj);
}
}
//移除对上上事件的绑定
function removeEventHandler(obj,eventType,handler)
{
if(obj.removeEventListener)
{
obj.removeEventListener(eventType,handler,false);
}
else if(obj.detachEvent)
{
obj.detachEvent("on"+eventType,handler);
}
else
{
obj["on"+eventType]=null;
}
}
//定义颜色渐变对象
var ColorFade=
{
Create:function(obj,startColor,endColor)
{
this._obj=$(obj);//获取颜色渐变dom对象
this._timer=null;//定时器
this._step=20;//渐变步长
this._speed=80;//渐变速度
this._color=this.GetColors(startColor);//某时刻的颜色值
this._ecolor=this.GetColors(endColor);//结束颜色
this._scolor=this._color;//起始颜色
//颜色变换步长
this._arrStep=[this.GetStep(this._color[0],this._ecolor[0]),this.GetStep(this._color[1],this._ecolor[1]),this.GetStep(this._color[2],this._ecolor[2])];
//绑定鼠标事件到dom对象上
addEventHandler(this._obj, "mouseover", Bind(this,function(){this.Fade(this._ecolor);}));
addEventHandler(this._obj, "mouseout", Bind(this,function(){this.Fade(this._scolor); }));
},
GetColors:function(sColor)
{
//返回颜色对象如[255,102,0]
sColor=sColor.replace("#","");
var r,g,b;
if(sColor.length>3)
{
r=sColor.substr(0,2);
g=sColor.substr(2,2);
b=sColor.substr(4,2);
}
else
{
r=sColor.substr(0,1);
g=sColor.substr(1,1);
b=sColor.substr(2,1);
r=r+r;
g=g+g;
b=b+b;
}
return [parseInt(r,16),parseInt(g,16),parseInt(b,16)];
},
GetColor:function(c,ec,iStep)
{
//获取当前的R G 或是B的颜色值
if(c==ec){return c;}
if(c<ec){c+=iStep;return (c > ec ? ec : c);}//开始颜色比结束颜色深
else
{
c=c-iStep;return (c > ec ? c : ec);//开始颜色比结束颜色浅
}
},
GetStep:function(start,end)
{
//获取颜色渐变步长
var iStep=Math.abs((end-start)/this._step);
if(iStep>0&&iStep<1) iStep=1;
return parseInt(iStep);
},
Fade:function(rColor)
{
//渐变函数
clearTimeout(this._timer);
//获取结束的单个R,G,B颜色值
var er=rColor[0],eg=rColor[1],eb=rColor[2];
//计算出当前的单个R,G,B颜色值
var r=this.GetColor(this._color[0],er,this._arrStep[0]),g=this.GetColor(this._color[1],eg,this._arrStep[1]),b=this.GetColor(this._color[2],eb,this._arrStep[2]);
//设置dom对象颜色
this._obj.style.backgroundColor="#"+Hex(r)+Hex(g)+Hex(b);
//将当前值赋给this._color
this._color=[r,g,b];
if(r!=er||g!=eg||b!=eb)
{
this._timer=setTimeout(Bind(this,function(){this.Fade(rColor);}),this._speed);
}
}
};
function Hex(i)
{
if (i < 0) return "00";
else if (i > 255) return "ff";
else { var str = "0" + i.toString(16); return str.substring(str.length - 2); }
}
</script>
</head>
<body>
<div style="height:40px;width:200px;border:1px solid #ccc;" id="myDiv">hello</div>
<script type="text/javascript">
var ob=New(ColorFade,["myDiv","#CDEFAB","#345D34"]);
</script>
</body>
</html>
