奇妙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
以上就是本文的全部内容,盼望对大家的学习有所关心。
...