颜色渐变

 颜色渐变

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 无标题文档 </ title >
< script  type ="text/javascript" > ...
var Class = ...{
  create: function() ...{
    return function() ...{
      this.initialize.apply(this, arguments);
    }
  }
}

Object.extend = function(destination, source) ...{
    for (var property in source) ...{
        destination[property] = source[property];
    }
    return destination;
}

var ColorFade = Class.create();
ColorFade.prototype = ...{
  initialize: function(idObj, options) ...{
    var obj = document.getElementById(idObj);
    this.obj = obj;
    this.SetOptions(options);

    var sColor = this.GetColor(this.options.startColor);
    obj.style.color = this.options.startColor;
    var startColor = sColor;
    var endColor = this.GetColor(this.options.endColor);

    this.arrStep = [this.GetStep(startColor[0], endColor[0]), this.GetStep(startColor[1], endColor[1]), this.GetStep(startColor[2], endColor[2])];

    this.startColor = startColor;
    this.endColor = endColor;
    this.color = sColor;//当前颜色
    this.timer = null;

    var oFade = this;
    obj.onmouseover = function()...{ oFade.MouseOver() };
    obj.onmouseout = function()...{ oFade.MouseOut() };
  },
  //设置默认属性
  SetOptions: function(options) ...{
    this.options = ...{//默认值
      startColor:    "#671700",//定义原来的颜色
      endColor:        "#D8D1C5",//定义要渐变的颜色
      Step:            20,//渐变级数
      speed:        10//渐变速度
    };
    Object.extend(this.options, options || ...{});
  },
  //颜色渐变
  Fade: function(rColor) ...{
    var er = rColor[0], eg = rColor[1], eb = rColor[2], iStep = this.arrStep, color = this.color;

    r = this.GetRGB(color[0], er, iStep[0]);
    g = this.GetRGB(color[1], eg, iStep[1]);
    b = this.GetRGB(color[2], eb, iStep[2]);
    
    if (r==er && g==eg && b==eb) return;
    
    this.SetColor(r, g, b);
    var oFade = this;
    this.timer = setTimeout(function()...{oFade.Fade(rColor);}, this.options.speed);
  },
  //获取颜色数据    
  GetColor: function(sColor) ...{
    var r, g, b
    sColor = sColor.replace("#", "");
    if (sColor.length > 3) ...{
        r = Mid(sColor, 0, 2); g = Mid(sColor, 2, 2); b = Mid(sColor, 4, 2);
    } else ...{
        r = Mid(sColor, 0, 1); g = Mid(sColor, 1, 1); b = Mid(sColor, 2, 1);
        r += r; g += g; b += b;
    }
    return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
  },
  //设置颜色
  SetColor: function(r, g, b) ...{
    this.color = [r, g, b]; this.obj.style.color = "#" + Hex(r) + Hex(g) + Hex(b);
  },  
  //onmouseover事件
  MouseOver: function() ...{
    clearTimeout(this.timer); this.Fade(this.endColor);
  },
  //onmouseout事件
  MouseOut: function() ...{
    clearTimeout(this.timer); this.Fade(this.startColor);
  },
  //获取渐变颜色数据
  GetRGB: function(c, ec, iStep) ...{
    if (c == ec) ...{ return c; }
    if (c < ec) ...{ c += iStep; return (c > ec ? ec : c); }
    else ...{ c -= iStep; return (c < ec ? ec : c); }
  },
  //获取渐变级数
  GetStep: function(start, end) ...{
    var iStep = Math.ceil((end - start)/this.options.Step);
    return (iStep >= 1 ? iStep : 1);
  }
};


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); }
}

function Mid(string, start, length) ...{
    if (length) return string.substring(start, start + length);
    else return string.substring(start);
}
</ script >
</ head >

< body >
< a  href ="#"  id ="idLink" > 颜色渐变效果 </ a >
< div  id ="idDiv" > 颜色渐变效果 </ div >
< script > ...
new ColorFade("idLink");
new ColorFade("idDiv", ...{ startColor: "#f30", endColor: "#134" });
</ script >
</ body >
</ html >