奇妙js+CSS+DIV实现文字颜色渐变效果.docx
《奇妙js+CSS+DIV实现文字颜色渐变效果.docx》由会员分享，可在线阅读，更多相关《奇妙js+CSS+DIV实现文字颜色渐变效果.docx（6页珍藏版）》请在冰豆网上搜索。
奇妙js+CSS+DIV实现文字颜色渐变效果
奇妙！
js+CSS+DIV实现文字颜色渐变效果_
本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果，供大家参考，具体内容如下
下面是CSS部分代码：
!
--CSS代码开头--
body{
font:
12px/1.5MicrosoftYahei;
}
h3{
padding:
10px;
margin:
0;
background-color:
#999;
color:
#fff;
font:
16px/1.5MicrosoftYahei;
text-align:
center;
}
.box{
position:
relative;
background-color:
#fff;
width:
auto;
margin:
0auto;
padding:
030px;
font:
70020px/1.5"MicrosoftYahei",MicrosoftYahei;
border-top:
1pxdashed#ccc;
border-bottom:
1pxdashed#ccc;
height:
30px;
margin-top:
8px;
}
.boxa{
position:
absolute;
font-style:
normal;
white-space:
nowrap;
}
.f999{
color:
#999;
}
下面是DIV部分代码：
!
--DIV代码开头--
divstyle="width:
400px;margin:
200pxauto;background-color:
#f2f2f2;border:
1pxdashed#ccc;"
h3strongCSS多彩渐变字/strong/h3
tablewidth="100%"border="0"cellspacing="0"cellpadding="0"
tr
tdheight="10"colspan="2"align="center"/td
/tr
tr
tdwidth="19%"height="30"align="right"文字：
/td
tdwidth="81%"inputname="text"type="text"id="ctext"size="30"maxlength="16"style="font:
12pxMicrosoftYahei"value="请在此输入您需要生成渐变色的文字"onkeyup="setDiv（）"//td
/tr
tr
tdheight="30"align="right"R值：
/td
tdselectname="Rvalue"style="font:
12pxMicrosoftYahei"id="rvalue"/select
spanclass="f999"RGB颜色中的R值（0-255）/span/td
/tr
tr
tdheight="30"align="right"G值：
/td
tdselectname="Gvalue"style="font:
12pxMicrosoftYahei"id="gvalue"/select
spanclass="f999"RGB颜色中的G值（0-255）/span/td
/tr
tr
tdheight="30"align="right"B值：
/td
tdselectname="Bvalue"style="font:
12pxMicrosoftYahei"id="bvalue"/select
spanclass="f999"RGB颜色中的B值（0-255）/span/td
/tr
tr
tdheight="30"align="right"渐变方式：
/td
tdselectname="ctype"style="font:
12pxMicrosoftYahei"id="ctype"optionvalue="0"灰度渐变/optionoptionvalue="1"selected="selected"改变R值/optionoptionvalue="2"改变G值/optionoptionvalue="3"改变B值/option/select
spanclass="f999"相应的数值会强制在0~255之间改变/span/td
/tr
/table
divclass="box"id="box"/div
br/
buttononclick="javascript:
createData（）"OK，上色！
/button
br/
/div
以下是JavaScript部分代码：
//JavaScript代码开头
varrs=document.getElementById（"rvalue"）;
vargs=document.getElementById（"gvalue"）;
varbs=document.getElementById（"bvalue"）;
functioninit（）{
varstr;
for（vari=0;i=255;i++）{
varopr=document.createElement（"option"）;
varopg=document.createElement（"option"）;
varopb=document.createElement（"option"）;
opr.innerHTML=i;
opg.innerHTML=i;
opb.innerHTML=i;
switch（i）{
case100:
opb.selected="selected";break;
case200:
opg.selected="selected";break;
}
gs.appendChild（opg）;
rs.appendChild（opr）;
bs.appendChild（opb）;
}
setDiv（）;
}
functionsetDiv（）{
varfont=document.getElementById（"ctext"）.value;
vardObj=document.getElementById（"box"）;
dObj.innerHTML=font;
}
functioncreateData（）{
varfont=document.getElementById（"ctext"）.value;
varr=rs.options[rs.selectedIndex].text;
varg=gs.options[gs.selectedIndex].text;
varb=bs.options[bs.selectedIndex].text;
vartype=document.getElementById（"ctype"）.value;
if（font==""||font=="undefined"）{
font="文字不能为空，用法默认文字";
document.getElementById（"ctext"）.value=font;
}
colorful（'box',font,r,g,b,type）;
}
functioncolorful（obj,font,r,g,b,type）{
varboxObj;
if（typeof（obj）=="string"||typeof（obj）=="number"）{
boxObj=document.getElementById（obj）;
}else{
boxObj=obj;
}
boxObj.innerHTML="ahref='#'"+font+"";
varnum=boxObj.getElementsByTagName（"a"）[0].scrollWidth;
boxObj.innerHTML="";
for（vari=0;i=num;i++）{
varj=i+1;
varc=Math.round（255/num*i）;
switch（Number（type））{
case0:
r=c;g=c;b=c;break;
case1:
r=c;break;
case2:
g=c;break;
case3:
b=c;break;
}
variObj=document.createElement（"A"）;
iObj.innerHTML=font;
iObj.style.clip="rect（auto"+j+"pxauto"+i+"px）";
iObj.style.color="rgb（"+r+","+g+","+b+"）";
//iObj.href="#";//生成的文字超链接
boxObj.appendChild（iObj）;
}
}
init（）;
完整代码：
html
head
metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/
titleDIV+CSS+JS实现颜色渐变字体/title
styletype="text/css"
body{font:
12px/1.5MicrosoftYahei;}
h3{padding:
10px;margin:
0;background-color:
#999;color:
#fff;font:
16px/1.5MicrosoftYahei;text-align:
center;}
.box{position:
relative;background-color:
#fff;width:
auto;margin:
0auto;padding:
030px;font:
70020px/1.5"MicrosoftYahei",MicrosoftYahei;border-top:
1pxdashed#ccc;border-bottom:
1pxdashed#ccc;height:
30px;margin-top:
8px;}
.boxa{position:
absolute;font-style:
normal;white-space:
nowrap;}
.f999{color:
#999;}
a:
link{text-decoration:
none;}
a:
hover{text-decoration:
underline;}
a:
visited{text-decoration:
none;}
/style
/head
body
divstyle="width:
400px;margin:
200pxauto;background-color:
#f2f2f2;border:
1pxdashed#ccc;"
h3strongCSS多彩渐变字/strong/h3
tablewidth="100%"border="0"cellspacing="0"cellpadding="0"
tr
tdheight="10"colspan="2"align="center"/td
/tr
tr
tdwidth="19%"height="30"align="right"文字：
/td
tdwidth="81%"inputname="text"type="text"id="ctext"size="30"maxlength="16"style="font:
12pxMicrosoftYahei"value="请在此输入您需要生成渐变色的文字"onkeyup="setDiv（）"//td
/tr
tr
tdheight="30"align="right"R值：
/td
tdselectname="Rvalue"style="font:
12pxMicrosoftYahei"id="rvalue"/select
spanclass="f999"RGB颜色中的R值（0-255）/span/td
/tr
tr
tdheight="30"align="right"G值：
/td
tdselectname="Gvalue"style="font:
12pxMicrosoftYahei"id="gvalue"/select
spanclass="f999"RGB颜色中的G值（0-255）/span/td
/tr
tr
tdheight="30"align="right"B值：
/td
tdselectname="Bvalue"style="font:
12pxMicrosoftYahei"id="bvalue"/select
spanclass="f999"RGB颜色中的B值（0-255）/span/td
/tr
tr
tdheight="30"align="right"渐变方式：
/td
tdselectname="ctype"style="font:
12pxMicrosoftYahei"id="ctype"optionvalue="0"灰度渐变/optionoptionvalue="1"selected="selected"改变R值/optionoptionvalue="2"改变G值/optionoptionvalue="3"改变B值/option/select
spanclass="f999"相应的数值会强制在0~255之间改变/span/td
/tr
/table
divclass="box"id="box"/div
br/
buttononclick="javascript:
createData（）"OK，上色！
/button
br/
/div
scripttype="text/javascript"
varrs=document.getElementById（"rvalue"）;
vargs=document.getElementById（"gvalue"）;
varbs=document.getElementById（"bvalue"）;
functioninit（）{
varstr;
for（vari=0;i=255;i++）{
varopr=document.createElement（"option"）;
varopg=document.createElement（"option"）;
varopb=document.createElement（"option"）;
opr.innerHTML=i;
opg.innerHTML=i;
opb.innerHTML=i;
switch（i）{
case100:
opb.selected="selected";break;
case200:
opg.selected="selected";break;
}
gs.appendChild（opg）;
rs.appendChild（opr）;
bs.appendChild（opb）;
}
setDiv（）;
}
functionsetDiv（）{
varfont=document.getElementById（"ctext"）.value;
vardObj=document.getElementById（"box"）;
dObj.innerHTML=font;
}
functioncreateData（）{
varfont=document.getElementById（"ctext"）.value;
varr=rs.options[rs.selectedIndex].text;
varg=gs.options[gs.selectedIndex].text;
varb=bs.options[bs.selectedIndex].text;
vartype=document.getElementById（"ctype"）.value;
if（font==""||font=="undefined"）{
font="文字不能为空，用法默认文字";
document.getElementById（"ctext"）.value=font;
}
colorful（'box',font,r,g,b,type）;
}
functioncolorful（obj,font,r,g,b,type）{
varboxObj;
if（typeof（obj）=="string"||typeof（obj）=="number"）{
boxObj=document.getElementById（obj）;
}else{
boxObj=obj;
}
boxObj.innerHTML="ahref='#'"+font+"/a";
varnum=boxObj.getElementsByTagName（"a"）[0].scrollWidth;
boxObj.innerHTML="";
for（vari=0;i=num;i++）{
varj=i+1;
varc=Math.round（255/num*i）;
switch（Number（type））{
case0:
r=c;g=c;b=c;break;
case1:
r=c;break;
case2:
g=c;break;
case3:
b=c;break;
}
variObj=document.createElement（"A"）;
iObj.innerHTML=font;
iObj.style.clip="rect（auto"+j+"pxauto"+i+"px）";
iObj.style.color="rgb（"+r+","+g+","+b+"）";
//iObj.href="#";//生成的文字超链接
boxObj.appendChild（iObj）;
}
}
init（）;
/script
/body
/html
以上就是本文的全部内容，盼望对大家的学习有所关心。
...
升级会员 