DIV+CSS+JS实现的文字色彩渐变（转载）

如题，这是一个简单的 CSS + DIV + JavaScript 实现的文字色彩渐变效果。

点击查看：Demo | 右键另存下载, 或拷贝以下代码

下面是 CSS 部分代码：

body{
	font:12px/1.5 Microsoft Yahei;
}
h3{
	padding:10px;
	margin:0;
	background-color:#999;
	color:#fff;
	font:16px/1.5 Microsoft Yahei;
	text-align:center;
}
.box{
	position:relative;
	background-color:#fff;
	width:auto;
	margin:0 auto;
	padding:0 30px;
	font:700 20px/1.5 "Microsoft Yahei",Microsoft Yahei;
	border-top:1px dashed #ccc;
	border-bottom:1px dashed #ccc;
	height:30px;
	margin-top:8px;
}
.box a{
	position:absolute;
	font-style:normal;
	white-space:nowrap;
}
.f999{
	color:#999;
}

下面是 DIV 部分代码：

CSS多彩渐变字

  

    

    
  

    
文字：
    

  
  

    
R值：
    

    RGB颜色中的R值（0-255）
  
  

    
G值：
    

      RGB颜色中的G值（0-255）
  
  

    
B值：
    

      RGB颜色中的B值（0-255）
  
  

    
渐变方式：
    
灰度渐变变化R值变化G值变化B值
    相应的数值会强制在0~255之间变化
  




    OK，上色！


 

以下是 JavaScript 部分代码：

// 代码开始
var rs = document.getElementById("rvalue");
var gs = document.getElementById("gvalue");
var bs = document.getElementById("bvalue");
function init(){
	var str;
	for(var i=0;i<=255;i++){
		var opr = document.createElement("option");
		var opg = document.createElement("option");
		var opb = document.createElement("option");
		opr.innerHTML = i;
		opg.innerHTML = i;
		opb.innerHTML = i;
		switch(i){
			case 100:opb.selected="selected";break;
			case 200:opg.selected="selected";break;
		}
		gs.appendChild(opg);
		rs.appendChild(opr);
		bs.appendChild(opb);
	}
	setDiv();
}
function setDiv(){
	var font = document.getElementById("ctext").value;
	var dObj = document.getElementById("box");
	dObj.innerHTML=font;
}
function createData(){
	var font = document.getElementById("ctext").value;
	var r = rs.options[rs.selectedIndex].text;
	var g = gs.options[gs.selectedIndex].text;
	var b = bs.options[bs.selectedIndex].text;
	var type = document.getElementById("ctype").value;
	if(font==""||font=="undefined"){
		font="文字不能为空，使用默认文字";
		document.getElementById("ctext").value = font;
	}
	colorful('box',font,r,g,b,type);
}
function colorful(obj,font,r,g,b,type){
	var boxObj;
	if(typeof(obj)=="string"||typeof(obj)=="number"){
		boxObj =  document.getElementById(obj);
	}else{
		boxObj = obj;
	}
	boxObj.innerHTML=""+font+"";
	var num = boxObj.getElementsByTagName("a")[0].scrollWidth;
	boxObj.innerHTML="";
	for(var i=0;i<=num;i++){
		var j=i+1;
		var c=Math.round(255/num*i);
		switch(Number(type)){

			case 0:r=c;g=c;b=c;break;
			case 1:r=c;break;
			case 2:g=c;break;
			case 3:b=c;break;
		}
		var iObj = document.createElement("A");
		iObj.innerHTML=font;
		iObj.style.clip="rect(auto "+j+"px auto "+i+"px)";
		iObj.style.color="rgb("+r+","+g+","+b+")";
		//iObj.href="#";  // 生成的文字超链接
		boxObj.appendChild(iObj);
	}
}
init();