JavaScript 颜色渐变效果

　2010-09-14 13:27:44　来源：WEB开发网　　　

核心提示：文字或背景颜色渐变的效果。效果：代码：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">&

文字或背景颜色渐变的效果。

效果：

JavaScript 颜色渐变效果

代码：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>Javascript颜色渐变效果</title> <scripttype="text/javascript"> var$=function(id){ 　　return"string"==typeofid?document.getElementById(id):id; }; varClass={ 　create:function(){ 　　returnfunction(){ 　　　this.initialize.apply(this,arguments); 　　} 　} } Object.extend=function(destination,source){ 　　for(varpropertyinsource){ 　　　　destination[property]=source[property]; 　　} 　　returndestination; } functionaddEventHandler(oTarget,sEventType,fnHandler){ 　　if(oTarget.addEventListener){ 　　　　oTarget.addEventListener(sEventType,fnHandler,false); 　　}elseif(oTarget.attachEvent){ 　　　　oTarget.attachEvent("on"+sEventType,fnHandler); 　　}else{ 　　　　oTarget["on"+sEventType]=fnHandler; 　　} }; varColorFade=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); 　　　　varoThis=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("#",""); 　　varr,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){returnc;} 　　if(c<ec){c+=iStep;return(c>ec?ec:c);} 　　else{c-=iStep;return(c<ec?ec:c);} 　}, 　//获取渐变级数　GetStep:function(start,end){ 　　variStep=Math.abs((end-start)/this.Step); 　　if(iStep>0&&iStep<1)iStep=1; 　　returnparseInt(iStep); 　}, 　//颜色渐变　Fade:function(rColor){ 　　clearTimeout(this._timer); 　　　　varer=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){varoThis=this;this._timer=setTimeout(function(){oThis.Fade(rColor);},this.Speed);} 　} }; //返回16进制数 functionHex(i){ 　　if(i<0)return"00"; 　　elseif(i>255)return"ff"; 　　else{varstr="0"+i.toString(16);returnstr.substring(str.length-2);} } //仿asp的mid截字 functionMid(string,start,length){ 　　if(length)returnstring.substring(start,start+length); 　　elsereturnstring.substring(start); } </script> </head> <body> <divid="idDiv"style="padding:10px;">颜色渐变效果</div> <styletype="text/css"> #idMenu{clear:both;height:35px;background:#DBDBDB;width:560px;} #idMenuli{float:left;line-height:25px;width:100px;text-align:center;margin:5px;cursor:pointer;} </style> <ulid="idMenu"> <li> 菜单 </li> <li> 菜单 </li> <li> 菜单 </li> <li> 菜单 </li> <li> 菜单 </li> </ul> <script> newColorFade("idDiv",{StartColor:"#000",EndColor:"#fff"}); newColorFade("idDiv",{StartColor:"#fff",EndColor:"#000",Background:true}); varobjs=document.getElementById("idMenu").getElementsByTagName("li"); for(vari=0,len=objs.length;i<len;i++){ 　　newColorFade(objs[i],{StartColor:"#333",EndColor:"#fff",Speed:20}); 　　newColorFade(objs[i],{StartColor:"#f6f6f6",EndColor:"#3ea936",Background:true,Speed:20}); } </script> </body> </html>