【转】JavaScript 颜色渐变效果【修改版】

代码

<! 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=utf-8"   />
< title > 颜色渐变实例 </ title >
< script  type ="text/javascript" >
// --------------------------------------------------------------------
// 基础类库:
// 1.获取对象：
function  $(id){
     return   typeof  id == ' string ' ? document.getElementById(id):id;    
    }
// 2.添加事件监听：
function  addEventHandler(oTarget,sEventType,fnHandler){
         if (oTarget.addEventListener){
                oTarget.addEventListener(sEventType,fnHandler, false );
            } else   if (oTarget.attachEvent){
                oTarget.attachEvent( " on " + sEventType,fnHandler);
            } else {
            
                oTarget[ " on " + sEventType] = fnHandler;
            }
    }
// 3.自定"义产生对象"类：
var  Class = {
        Create: function (){
                 return   function (){
                         this .initialize.apply( this ,arguments);
                    }
            }    
    } 
// 4.对象属性合并：
Object.extend = function (destination,source){
         for ( var  property  in  source){
            destination[property] = source[property];
        }
         return  destination;
        
    }
    
// --------------------------------------------------------------------

var  colorFade = Class.Create();

colorFade.prototype = {
         // 1.类的初始化：
        initialize: function (obj,options){
                 this ._obj = $(obj); // 当前要改变颜色的对象。
                 this ._timer = null ; // 计时器。
                
                 this .SetOptions(options); // 传入的数组参数。
                 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 ? function (sColor){
                         this ._obj.style.backgroundColor = sColor;
                    }: function (sColor){
                         this ._obj.style.color = sColor;
                    };
                 this ._setObjColor( this .options.StartColor);    
                 // 为对象添加事件：
                 var  oThis = this ;
                addEventHandler( this ._obj, " mouseover " ,
                     function (){
                            oThis.Fade(oThis.EndColorArr);
                        }
                );
                addEventHandler( this ._obj, " mouseout " , function (){
                    
                        oThis.Fade(oThis.StartColorArr);
                    });
                
            },
         /*
            2.对象属性初始化：
         */     
        SetOptions: function (options){
                 this .options = {
                    StartColor:     " #000000 " ,
                    EndColor:     " #ffffff " ,
                    Steps:         20 , // 渐变次数
                    Speed:         20 , // 渐变速度，即每隔多少（Speed）毫秒渐变一次。
                    Background:  true // 是否为对象背景渐变。
                }
                 // 合并属性：
                Object.extend( this .options,options || {});
                
            },
         /*
            3.得到某个颜色的"r.g.b"信息数组：    
            sColor：被计算的颜色值，格式为"#ccc000"。
            返回的一个数组。
         */
        getColorArr: function (sColor){
                 var  curColor = sColor.replace( " # " , "" );
                 var  r,g,b;
                 if (curColor.length > 3 ){ // 六位值
                    r = curColor.substr( 0 , 2 );
                    g = curColor.substr( 2 , 2 );
                    b = curColor.substr( 4 , 2 );
                } else {
                    r = curColor.substr( 0 , 1 );
                    g = curColor.substr( 1 , 1 );
                    b = curColor.substr( 2 , 1 );
                    r += r;
                    g += g;
                    b += b;
                }
                 // 返回“十六进制”数据的“十进制”值：
                 return  [parseInt(r, 16 ),parseInt(g, 16 ),parseInt(b, 16 )];
            },
         /*
            4.得到当前原色值（r.g.b）渐变的梯度值。
            sRGB：开始颜色值（十进制）
            eRGB：结束的颜色值（十进制）
         */
        getColorAddValue: function (sRGB,eRGB){
             var  stepValue = Math.abs((eRGB - sRGB) / this.Steps);
             if (stepValue > 0 && stepValue < 1 ){
                stepValue = 1 ;
            }
             return  parseInt(stepValue);
            
        },    
         /*
            5.得到当前渐变颜色的"r.g.b"信息数组。
            startColor:开始的颜色，格式为"#ccc000"；
            iStep:当前渐变的级数（即当前渐变的次数）。
            返回颜色值，如 #fff000。
         */
        getStepColor: function (sColor,eColor,addValue){
                   if (sColor == eColor){
                     return  sColor;
                } else   if (sColor < eColor){
                     return  (sColor + addValue) > eColor ? eColor:(sColor + addValue);
                } else   if (sColor > eColor){
                     return   (sColor - addValue) < eColor ? eColor:(sColor - addValue);
                }
            
            },
            
         /*
            6.开始渐变：
            endColorArr:目标颜色，为r.g.b信息数组。
         */
        Fade: function (endColorArr){
                 clearTimeout( this ._timer);
                 var  er = endColorArr[ 0 ],
                eg = endColorArr[ 1 ],
                eb = endColorArr[ 2 ],
                r = this .getStepColor( this ._colorArr[ 0 ],er, this ._stepAddValueArr[ 0 ]),
                g = this .getStepColor( this ._colorArr[ 1 ],eg, this ._stepAddValueArr[ 1 ]),
                b = this .getStepColor( this ._colorArr[ 2 ],eb, this ._stepAddValueArr[ 2 ]);
                
                 this ._colorArr = [r,g,b];
                
                 this ._setObjColor( " # " + Hex(r)  +  Hex(g)  +  Hex(b));
                 if (r != er || g != eg || b != eb){
                     var  oThis = this ;
                    oThis._timer = setTimeout( function (){oThis.Fade(endColorArr)},oThis.Speed);
                
                }
                
                
                 
            
            }
            
            
    
    }
    
// 返回16进制数
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  id ="test"  style ="height:40px;width:200px;border:1px solid red;" >
    嘻嘻!
</ div >
< div  id ="test1"  style ="height:40px;width:200px;border:1px solid red;" >
    呵呵!
</ div >

< div  id ="test2"  style ="height:40px;width:200px;border:1px solid red;" >
    哈哈!
</ div >

</ body >
< script  type ="text/javascript" >
var  colorFade01 = new  colorFade( " test " ,{StartColor: ' #000000 ' ,EndColor: ' #8AD4FF ' ,Background: true });
var  colorFade02 = new  colorFade( " test " ,{StartColor: ' #8AD4FF ' ,EndColor: ' #000000 ' ,Background: false });

var  colorFade03 = new  colorFade( " test1 " ,{StartColor: ' #000000 ' ,EndColor: ' #8AD4FF ' ,Background: true });
var  colorFade04 = new  colorFade( " test1 " ,{StartColor: ' #8AD4FF ' ,EndColor: ' #000000 ' ,Background: false });

var  colorFade05 = new  colorFade( " test2 " ,{StartColor: ' #000000 ' ,EndColor: ' #8AD4FF ' ,Background: true });
var  colorFade06 = new  colorFade( " test2 " ,{StartColor: ' #8AD4FF ' ,EndColor: ' #000000 ' ,Background: false });
</ script >

</ html >

 

 

 

 

摘自：http://www.cnblogs.com/cloudgamer/archive/2008/01/15/ColorFade.html