时间:2021-07-01 10:21:17 帮助过:22人阅读
点击查看: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) 渐变方式: 相应的数值会强制在0~255之间变化
以下是 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=""+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();