<!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>
主营企业建站，seo优化，手机网站，微信网站开发等业务！>> 繁体中文
E- mail:
本站ICP备案号：
