本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果。分享给大家供大家参考,具体如下:
运行效果图如下:
完整代码如下:
& lt; !DOCTYPE html公共”——//W3C XHTML 1.0//DTD过渡//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”在
& lt; html xmlns=" http://www.w3.org/1999/xhtml "比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>颜色渐变实例& lt;/title>
& lt;脚本type=" text/javascript祝辞//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -//基础类库://1 .获取对象:
函数$ (id) {
返回typeof id=='字符串' & # 63;. getelementbyid (id):身份证;
}//2 .添加事件监听:
函数addEventHandler (oTarget sEventType fnHandler) {
如果(oTarget.addEventListener) {
oTarget.addEventListener (sEventType fnHandler,假);
}else if (oTarget.attachEvent) {
oTarget.attachEvent (“on”+ sEventType fnHandler);
其他}{
oTarget [“on”+ sEventType]=fnHandler;
}
}//3 .自定“义产生对象”类:={var类
创建:函数(){
返回函数(){
this.initialize.apply(参数);
}
}
}//4 .对象属性合并:
Object.extend=函数(目的地,源){
(var属性的源){
目的地[属性]=[属性]来源;
}
返回目的地;
}//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
var colorFade=Class.Create ();
colorFade.prototype={//1 .类的初始化:
初始化:函数(obj,期权){
this._obj=$ (obj);//当前要改变颜色的对象。
this._timer=零;//计时器。
this.SetOptions(选项);//传入的数组参数。
this.Steps=Math.abs (this.options.Steps);
this.Speed=Math.abs (this.options.Speed);//this._colorArr:用来寄存当前颜色的r.g.b信息。
this.StartColorArr=this._colorArr=this.getColorArr (this.options.StartColor);
this.EndColorArr=this.getColorArr (this.options.EndColor);
this.Background=this.options.Background;//从开始到结束,r.g.b三种原色渐变的梯度值(即,每次渐变要增加/减少的值)。
this._stepAddValueArr=[this.getColorAddValue (this.StartColorArr [0], this.EndColorArr [0]), this.getColorAddValue (this.StartColorArr [1], this.EndColorArr [1]), this.getColorAddValue (this.StartColorArr [2], this.EndColorArr [2]));//设置对象颜色:
this._setObjColor=this.Background& # 63;函数(sColor) {
this._obj.style.backgroundColor=sColor;
}:函数(sColor) {
this._obj.style.color=sColor;
};
this._setObjColor (this.options.StartColor);//为对象添加事件:
var oThis=;
addEventHandler (this._obj”,鼠标移至“,
函数(){
oThis.Fade (oThis.EndColorArr);
}
);
addEventHandler (this._obj,“mouseout”功能(){
oThis.Fade (oThis.StartColorArr);
});
}，/*
2 .对象属性初始化:
*/setoption:功能(选项){
this.options={
StartColor:“000000 #”,
EndColor:“# ffffff”,//步骤:20日渐变次数//速度:20日渐变速度,即每隔多少(速度)毫秒渐变一次。
背景:真正的//是否为对象背景渐变。
}//合并属性:
Object.extend (this.options选项| | {});
}，/*
3 .得到某个颜色的“r.g.b”信息数组:
sColor:被计算的颜色值,格式为“# ccc000”。
返回的一个数组。
*/getColorArr:函数(sColor) {
var curColor=sColor.replace (" # ", " ");
var r, g, b;
如果(curColor.length> 3){//六位值
r=curColor.substr (0, 2);
g=curColor.substr (2, 2);
b=curColor.substr (4,2);
其他}{
r=curColor.substr (0,1);
g=curColor.substr (1,1);
b=curColor.substr (2, 1);
+=r;
g +=g;
b +=b;
}
”//返回“十六进制数据的“十进制”值:
返回[方法(r, 16)、方法(g, 16)、方法(b, 16)];
}，/*
4 .得到当前原色值(r.g.b)渐变的梯度值。
sRGB:开始颜色值(十进制)
eRGB:结束的颜色值(十进制)
*/getColorAddValue:函数(sRGB eRGB) {
var stepValue=https://www.yisu.com/zixun/Math.abs ((eRGB-sRGB)/this.Steps);
如果(stepValue> 0 &&stepvalue <1) {
stepValue=1;
}
回归方法(stepValue);
}，/*
5 .得到当前渐变颜色的“r.g.b”信息数组。
startColor:开始的颜色,格式为“# ccc000”;
iStep:当前渐变的级数(即当前渐变的次数)。
返回颜色值,如# fff000。
*/getStepColor:函数(sColor eColor addValue) {
如果(sColor==eColor) {
返回sColor;
}else if (sColor
