如题,这是一个简单的 CSS + DIV + JavaScript 实现的文字色彩渐变效果。
点击查看:**Demo | 右键另存下载, 或拷贝以下代码**
下面是 CSS 部分代码:
<!--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 部分代码:
<!--DIV代码开始-->
<div style="width:400px;margin:200px auto;background-color:#f2f2f2;border: 1px dashed #ccc;">
<h3><strong>CSS多彩渐变字</strong></h3>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="10" colspan="2" align="center"></td>
</tr>
<tr>
<td width="19%" height="30" align="right">文字:</td>
<td width="81%"><input name="text" type="text" id="ctext" size="30" maxlength="16" style="font:12px Microsoft Yahei" value="请在此输入您需要生成渐变色的文字" onkeyup="setDiv()" /></td>
</tr>
<tr>
<td height="30" align="right">R值:</td>
<td><select name="Rvalue" style="font:12px Microsoft Yahei" id="rvalue"></select>
<span class="f999">RGB颜色中的R值(0-255)</span></td>
</tr>
<tr>
<td height="30" align="right">G值:</td>
<td><select name="Gvalue" style="font:12px Microsoft Yahei" id="gvalue"></select>
<span class="f999">RGB颜色中的G值(0-255)</span></td>
</tr>
<tr>
<td height="30" align="right">B值:</td>
<td><select name="Bvalue" style="font:12px Microsoft Yahei" id="bvalue"></select>
<span class="f999">RGB颜色中的B值(0-255)</span></td>
</tr>
<tr>
<td height="30" align="right">渐变方式:</td>
<td><select name="ctype" style="font:12px Microsoft Yahei" id="ctype"><option value="0">灰度渐变</option><option value="1" selected="selected">变化R值</option><option value="2">变化G值</option><option value="3">变化B值</option></select>
<span class="f999">相应的数值会强制在0~255之间变化</span></td>
</tr>
</table>
<div class="box" id="box"></div>
<br />
<button onclick="javascript:createData()">OK,上色!</button>
<br />
</div>
以下是 JavaScript 部分代码:
// 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="<a href='#'>"+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();