WEB开发网
开发学院网页设计JavaScript JavaScript 颜色渐变效果 阅读

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>

Tags:JavaScript 颜色 渐变

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接