《奇妙！js+CSS+DIV实现文字颜色渐变效果_.docx》由会员分享，可在线阅读，更多相关《奇妙！js+CSS+DIV实现文字颜色渐变效果_.docx（16页珍藏版）》请在三一文库上搜索。
1、奇妙！js+CSS+DIV实现文字颜色渐变效果_ 本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果，供大家参考，具体内容如下 下面是 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
2、; 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:400p
3、x;margin:200px auto;background-color:#f2f2f2;border: 1px dashed #ccc; h3strongCSS多彩渐变字/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 maxl
4、ength=16 style=font:12px Microsoft Yahei value=请在此输入您需要生成渐变色的文字 onkeyup=setDiv() /td /tr tr td height=30 align=rightR值：/td tdselect name=Rvalue style=font:12px Microsoft Yahei id=rvalue/select span class=f999RGB颜色中的R值（0-255）/span/td /tr tr td height=30 align=rightG值：/td tdselect name=Gvalue style=fo
5、nt:12px Microsoft Yahei id=gvalue/select span class=f999RGB颜色中的G值（0-255）/span/td /tr tr td height=30 align=rightB值：/td tdselect name=Bvalue style=font:12px Microsoft Yahei id=bvalue/select span class=f999RGB颜色中的B值（0-255）/span/td /tr tr td height=30 align=right渐变方式：/td tdselect name=ctype style=font:
6、12px Microsoft Yahei id=ctypeoption value=0灰度渐变/optionoption value=1 selected=selected改变R值/optionoption value=2改变G值/optionoption value=3改变B值/option/select span class=f999相应的数值会强制在0255之间改变/span/td /tr /table div class=box id=box/div br / button onclick=javascript:createData()OK，上色！/button br / /div 以
7、下是 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 op
8、b = 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.getElement
9、ById(ctext).value; var dObj = document.getElementById(box); dObj.innerHTML=font; function createData() var font = document.getElementById(ctext).value; var r = rs.optionsrs.selectedIndex.text; var g = gs.optionsgs.selectedIndex.text; var b = bs.optionsbs.selectedIndex.text; var type = document.getEl
10、ementById(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; boxO
11、bj.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
12、); 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(); 完整代码： html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleDIV+CSS+JS实现颜色渐变字体/title style type=text/css bodyfon
13、t:12px/1.5 Microsoft Yahei; h3padding:10px;margin:0;background-color:#999;color:#fff;font:16px/1.5 Microsoft Yahei;text-align:center; .boxposition: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; bord
14、er-bottom:1px dashed #ccc;height:30px;margin-top:8px; .box aposition:absolute;font-style:normal;white-space:nowrap; .f999color:#999; a:linktext-decoration:none; a:hovertext-decoration:underline; a:visitedtext-decoration:none; /style /head body div style=width:400px;margin:200px auto;background-color
15、:#f2f2f2;border: 1px dashed #ccc; h3strongCSS多彩渐变字/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 Y
16、ahei value=请在此输入您需要生成渐变色的文字 onkeyup=setDiv() /td /tr tr td height=30 align=rightR值：/td tdselect name=Rvalue style=font:12px Microsoft Yahei id=rvalue/select span class=f999RGB颜色中的R值（0-255）/span/td /tr tr td height=30 align=rightG值：/td tdselect name=Gvalue style=font:12px Microsoft Yahei id=gvalue/se
17、lect span class=f999RGB颜色中的G值（0-255）/span/td /tr tr td height=30 align=rightB值：/td tdselect name=Bvalue style=font:12px Microsoft Yahei id=bvalue/select span class=f999RGB颜色中的B值（0-255）/span/td /tr tr td height=30 align=right渐变方式：/td tdselect name=ctype style=font:12px Microsoft Yahei id=ctypeoption
18、value=0灰度渐变/optionoption value=1 selected=selected改变R值/optionoption value=2改变G值/optionoption value=3改变B值/option/select span class=f999相应的数值会强制在0255之间改变/span/td /tr /table div class=box id=box/div br / button onclick=javascript:createData()OK，上色！/button br / /div script type=text/javascript var rs =
19、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.innerH
20、TML = 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.getElem
21、entById(box); dObj.innerHTML=font; function createData() var font = document.getElementById(ctext).value; var r = rs.optionsrs.selectedIndex.text; var g = gs.optionsgs.selectedIndex.text; var b = bs.optionsbs.selectedIndex.text; var type = document.getElementById(ctype).value; if(font=|font=undefine
22、d) 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+/a; var num = boxOb
23、j.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(); /script /body /html 以上就是本文的全部内容，盼望对大家的学习有所关心。 .