<!
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 > Javascript 颜色渐变效果 </ title >
< script type ="text/javascript" >
var $ = function (id) {
return " string " == typeof id ? document.getElementById(id) : id;
};
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;
}
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;
}
};
var ColorFade = Class.create();
ColorFade.prototype = {
initialize: function (Obj, options) {
this ._obj = $(Obj);
this ._timer = null ;
this .SetOptions(options);
this .Step = Math.abs( this .options.Step);
this .Speed = Math.abs( this .options.Speed);
this .StartColor = this ._color = this .GetColors( this .options.StartColor);
this .EndColor = this .GetColors( this .options.EndColor);
this ._arrStep = [ this .GetStep( this .StartColor[ 0 ], this .EndColor[ 0 ]), this .GetStep( this .StartColor[ 1 ], this .EndColor[ 1 ]), this .GetStep( this .StartColor[ 2 ], this .EndColor[ 2 ])];
this ._set = ! this .options.Background ? function (color){ this ._obj.style.color = color; } : function (color){ this ._obj.style.backgroundColor = color; };
this ._set( this .options.StartColor);
var oThis = this ;
addEventHandler( this ._obj, " mouseover " , function (){ oThis.Fade(oThis.EndColor); });
addEventHandler( this ._obj, " mouseout " , function (){ oThis.Fade(oThis.StartColor); });
},
// 设置默认属性
SetOptions: function (options) {
this .options = { // 默认值
StartColor: " #000 " , // 定义原来的颜色
EndColor: " #DDC " , // 定义要渐变的颜色
Background: false , // 是否背景变色(默认文字)
Step: 20 , // 渐变级数
Speed: 10 // 渐变速度
};
Object.extend( this .options, options || {});
},
// 获取颜色数据
GetColors: function (sColor) {
sColor = sColor.replace( " # " , "" );
var r, g, b;
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 )];
},
// 获取渐变颜色数据
GetColor: 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.abs((end - start) / this .Step);
if (iStep > 0 && iStep < 1 ) iStep = 1 ;
return parseInt(iStep);
},
// 颜色渐变
Fade: function (rColor) {
clearTimeout( this ._timer);
var er = rColor[ 0 ], eg = rColor[ 1 ], eb = rColor[ 2 ], 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 ]);
this ._set( " # " + Hex(r) + Hex(g) + Hex(b));
this ._color = [r, g, b];
if (r != er || g != eg || b != eb){ var oThis = this ; this ._timer = setTimeout( function (){ oThis.Fade(rColor); }, this .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 ); }
}
// 仿asp的mid 截字
function Mid(string, start, length) {
if (length) return string.substring(start, start + length);
else return string.substring(start);
}
</ script >
</ head >
< body >
< div id ="idDiv" style ="padding:10px;" > 颜色渐变效果 </ div >
< style type ="text/css" >
#idMenu { clear : both ; height : 35px ; background : #DBDBDB ; width : 560px ; }
#idMenu li { float : left ; line-height : 25px ; width : 100px ; text-align : center ; margin : 5px ; cursor : pointer ; }
</ style >
< ul id ="idMenu" >
< li >
菜单
</ li >
< li >
菜单
</ li >
< li >
菜单
</ li >
< li >
菜单
</ li >
< li >
菜单
</ li >
</ ul >
< script >
new ColorFade( " idDiv " , { StartColor: " #000 " , EndColor: " #fff " });
new ColorFade( " idDiv " , { StartColor: " #fff " , EndColor: " #000 " , Background: true });
var objs = document.getElementById( " idMenu " ).getElementsByTagName( " li " );
for ( var i = 0 , len = objs.length; i < len; i ++ ){
new ColorFade(objs[i], { StartColor: " #333 " , EndColor: " #fff " , Speed: 20 });
new ColorFade(objs[i], { StartColor: " #f6f6f6 " , EndColor: " #3ea936 " , Background: true , Speed: 20 });
}
</ script >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > Javascript 颜色渐变效果 </ title >
< script type ="text/javascript" >
var $ = function (id) {
return " string " == typeof id ? document.getElementById(id) : id;
};
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;
}
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;
}
};
var ColorFade = Class.create();
ColorFade.prototype = {
initialize: function (Obj, options) {
this ._obj = $(Obj);
this ._timer = null ;
this .SetOptions(options);
this .Step = Math.abs( this .options.Step);
this .Speed = Math.abs( this .options.Speed);
this .StartColor = this ._color = this .GetColors( this .options.StartColor);
this .EndColor = this .GetColors( this .options.EndColor);
this ._arrStep = [ this .GetStep( this .StartColor[ 0 ], this .EndColor[ 0 ]), this .GetStep( this .StartColor[ 1 ], this .EndColor[ 1 ]), this .GetStep( this .StartColor[ 2 ], this .EndColor[ 2 ])];
this ._set = ! this .options.Background ? function (color){ this ._obj.style.color = color; } : function (color){ this ._obj.style.backgroundColor = color; };
this ._set( this .options.StartColor);
var oThis = this ;
addEventHandler( this ._obj, " mouseover " , function (){ oThis.Fade(oThis.EndColor); });
addEventHandler( this ._obj, " mouseout " , function (){ oThis.Fade(oThis.StartColor); });
},
// 设置默认属性
SetOptions: function (options) {
this .options = { // 默认值
StartColor: " #000 " , // 定义原来的颜色
EndColor: " #DDC " , // 定义要渐变的颜色
Background: false , // 是否背景变色(默认文字)
Step: 20 , // 渐变级数
Speed: 10 // 渐变速度
};
Object.extend( this .options, options || {});
},
// 获取颜色数据
GetColors: function (sColor) {
sColor = sColor.replace( " # " , "" );
var r, g, b;
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 )];
},
// 获取渐变颜色数据
GetColor: 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.abs((end - start) / this .Step);
if (iStep > 0 && iStep < 1 ) iStep = 1 ;
return parseInt(iStep);
},
// 颜色渐变
Fade: function (rColor) {
clearTimeout( this ._timer);
var er = rColor[ 0 ], eg = rColor[ 1 ], eb = rColor[ 2 ], 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 ]);
this ._set( " # " + Hex(r) + Hex(g) + Hex(b));
this ._color = [r, g, b];
if (r != er || g != eg || b != eb){ var oThis = this ; this ._timer = setTimeout( function (){ oThis.Fade(rColor); }, this .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 ); }
}
// 仿asp的mid 截字
function Mid(string, start, length) {
if (length) return string.substring(start, start + length);
else return string.substring(start);
}
</ script >
</ head >
< body >
< div id ="idDiv" style ="padding:10px;" > 颜色渐变效果 </ div >
< style type ="text/css" >
#idMenu { clear : both ; height : 35px ; background : #DBDBDB ; width : 560px ; }
#idMenu li { float : left ; line-height : 25px ; width : 100px ; text-align : center ; margin : 5px ; cursor : pointer ; }
</ style >
< ul id ="idMenu" >
< li >
菜单
</ li >
< li >
菜单
</ li >
< li >
菜单
</ li >
< li >
菜单
</ li >
< li >
菜单
</ li >
</ ul >
< script >
new ColorFade( " idDiv " , { StartColor: " #000 " , EndColor: " #fff " });
new ColorFade( " idDiv " , { StartColor: " #fff " , EndColor: " #000 " , Background: true });
var objs = document.getElementById( " idMenu " ).getElementsByTagName( " li " );
for ( var i = 0 , len = objs.length; i < len; i ++ ){
new ColorFade(objs[i], { StartColor: " #333 " , EndColor: " #fff " , Speed: 20 });
new ColorFade(objs[i], { StartColor: " #f6f6f6 " , EndColor: " #3ea936 " , Background: true , Speed: 20 });
}
</ script >
</ body >
</ html >