论坛首页 入门技术论坛

js a标记褪色

浏览 1469 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-09-18  
实现鼠标移入时显示颜色,移出后颜色逐渐变成白色

/**
 * @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);
					};
				}
			}
论坛首页 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics