js a标记褪色

实现鼠标移入时显示颜色,移出后颜色逐渐变成白色


/**
* @author Yaojianzhou
*/
//颜色类
function Color(r,g,b){
this.r=r;
this.g=g;
this.b=b;
}
//颜色10转16进制
Color.prototype.toString=function(){
var sr=this.r.toString(16);
var sg=this.g.toString(16);
var sb=this.b.toString(16);
if(sr.length==1){sr="0"+sr;}
if(sg.length==1){sg="0"+sg;}
if(sb.length==1){sb="0"+sb;}
var color="#"+sr+sg+sb;
return color;
}
function setbg(el,color){
if(color instanceof Color){
el.style.backgroundColor=color.toString();
}
}
//淡出功能利用setInterval无限调用直到颜色为白色,清除interval
function fadeOut(el,color){
//在页面中可以创建以下3个div用来观察值的变化
//var resultr=document.getElementById("resultr");
//var resultg=document.getElementById("resultg");
//var resultb=document.getElementById("resultb");
var interval=setInterval(function(){
el.style.backgroundColor=color.toString();
if(color.r<255)
color.r++;
if(color.g<255)
color.g++;
if(color.b<255)
color.b++;
if(color.r==255&&color.g==255&&color.b==255)
clearInterval(interval);
},10);
}

//初始化函数,在body的onload中添加

function init(){
var links=document.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
var link=links[i];
link.onmouseover=function(){
this.color=new Color(0,255,0);//给link对象添加color属性
setbg(this,this.color);
};
link.onmouseout=function(){
fadeOut(this,this.color);
};
}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值