当前位置：文江博客话题详情

JavaScript-js怎么让汉字发生渐变？

发布于 2016-10-25 09:29:43 字数 55 浏览 1202 评论 4

目前有一些渐变的文字不想用图片去实现，想是不是可以用js来控制发生渐变的效果，各位大侠赐教一下。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜柠檬 2017-10-22 09:53:24

我也给你分享一个吧

<html>
<head>
<title>平滑的JavaScript文字渐变光特效</title>
<script language="JavaScript1.2">
<!-- // Hide
var isDOM = document.getElementById?1:0;
var isIE = document.all?1:0;
var isNS4 = (navigator.appName=='Netscape' && !isDOM)?1:0;
var isIE4 = (isIE && !isDOM)?1:0;
var isDyn = (isDOM||isIE4||isNS4);
function getRef(id, par){
par = (!par ? document : (par.navigator ? par.document : par));
return (isIE ? par.all[id] : (isDOM ? (par.getElementById?par:par.ownerDocument).getElementById(id) : par.layers[id]));
}

回复收藏 0

夜无邪 2017-10-04 01:29:57

提供一个：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS+JS实现文字渐变色生成效果丨芯晴网页特效丨CsrCode.Cn</title>
<style type="text/css">
body{font:12px/1.5 arial}
h3{padding:10px;margin:0;background-color:#c00;border:1px dashed #fff;color:#fff;font:16px/1.5 arial;}
.box{position:relative;background-color:#fff;width:auto;margin:0 auto;padding:0 30px;font:700 20px/1.5 "黑体",arial;border:1px dashed #f60;height:30px;margin-top:8px;}
.box a{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;}
address{background-color:#f1f1f1;border:1px dashed #ddd;padding:10px;font-style:normal;color:#999;}
address a,address a:visited{color:#c00;}
</style>
</head>
<body>
<div style="width:400px;margin:0 auto;background-color:#FFFFCC">
<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" value="欢迎光临芯晴网页特效CsrCode.Cn" onkeyup="setDiv()" /></td>
</tr>
<tr>
<td height="30" align="right">R值：</td>
<td><select name="rvalue" id="rvalue"></select>
<span class="f999">初始化RGB颜色中的R值</span></td>
</tr>
<tr>
<td height="30" align="right">G值：</td>
<td><select name="gvalue" id="gvalue"></select>
<span class="f999">初始化RGB颜色中的G值</span></td>
</tr>
<tr>
<td height="30" align="right">B值：</td>
<td><select name="bvalue" id="bvalue"></select>
<span class="f999">初始化RGB颜色中的B值</span></td>
</tr>
<tr>
<td height="30" align="right">渐变方式：</td>
<td><select name="ctype" 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()">渐变着色</button>
<br />

<address>
<br />
<a href="http://www.silentash.com?id=109" title="文章地址">http://www.silentash.com/?id=109</a>
</address>
</div>
<script type="text/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+"</a>";
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();
</script>
</body>
</html>

回复收藏 0

清晨说ぺ晚安 2017-03-11 06:10:01

分享给你一段我收藏的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文字特效</title>
</head>
<body bgcolor="#fef4d9" onload=changetext()>
<STYLE>.spanstyle {
BACKGROUND-COLOR: #004400; BORDER-BOTTOM-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-TOP-STYLE: solid; COLOR: olive; FONT-SIZE: 26px; HEIGHT: 90px; LEFT: -5000px; PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px; POSITION: absolute; TEXT-ALIGN: center; WIDTH: 280px
}
</STYLE>
<SCRIPT>
<!--
var textwidth=300
var textheight=50
var message=new Array()
message[0]="欢迎光临源码爱好者"
message[1]="网页设计特效代码站"
message[2]="编程精品源码下载"
message[3]="请牢记：源码爱好者"
var x_finalpos=-1
var y_finalpos=50
var x_slices=24
var y_slices=1
var pause=10
var screenwidth=700
var screenheight=400
var x_step=new Array()
var y_step=new Array()
var x_randompos=0
var y_randompos=0
var i_loop=0
var max_loop=24
var i_text=0
var width_slice=Math.floor(textwidth/x_slices)
var height_slice=Math.floor(textheight/y_slices)
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0
function initiate() {
if (x_finalpos==-1) {
x_finalpos=Math.floor(document.body.clientWidth/2)-Math.floor(textwidth/2)
}
if (y_finalpos==-1) {
y_finalpos=Math.floor(document.body.clientHeight/2)-Math.floor(textheight/2)
}
cliptop=0
clipbottom=height_slice
clipleft=0
clipright=width_slice
i_loop=0
spancounter=0
if (document.all) {
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.all.span"+spancounter+".style")
x_randompos=Math.ceil(screenwidth*Math.random())
y_randompos=Math.ceil(screenheight*Math.random())
thisspan.posLeft=x_randompos
thisspan.posTop=y_randompos
thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
clipleft+=width_slice
clipright+=width_slice
spancounter++
}
clipleft=0
clipright=width_slice
cliptop+=height_slice
clipbottom+=height_slice
}
}
explode_IE()
}

</SCRIPT>
<SCRIPT>
<!-- Beginning of JavaScript -
if (document.all) {
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
document.write("<span id='span"+spancounter+"' class='spanstyle'></span>")
spancounter++
}
}
spancounter=0
}
</SCRIPT>
</body>
</html>

参考：Js文字渐变，仿Flash效果

回复收藏 0

清晨说ぺ晚安 2016-11-10 21:04:34

JAVASCRIPT实现的代码：

<div id="id_txt" style="margin-left:20px; font-family: verdana;font-size: 44px; position: relative; width:500px; height:80px;font-family:微软雅黑;">
我是渐变文字
</div>

复制代码

Javascript:

function $(id) { return document.getElementById(id); }

var Text3D = function(options) {
var gradientColor = function(a,b,step,n){
var color = ['#'];
for(var i =0;i<3;i++){

//渐变颜色阶梯公式：A+(B-A)/step*n
var c = Math.round( a[i]+(b[i]-a[i])/step * n).toString(16);
if(c.length == 1)
c = '0'+c;
color.push( c);
}
return color.join('');
}

var color2Rgb = function(color) {
if (color.charAt(0) != '#') return;
if (color.length == 4) {
var str = '#';
for (var i = 1; i < 4; i++) {
str += color.slice(i, i + 1).concat(color.slice(i, i + 1));
}

color = str;
}

var rgb = [];

for (i = 1; i < 7; i += 2) {
rgb.push(parseInt(color.slice(i, i + 2), 16));
}

return rgb || [0,0,0];
}

var getCurrentStyle = function(el) {
if (el.currentStyle) {
return el.currentStyle;
} else if (window.getComputedStyle) {
return getComputedStyle(el, null);
}
return null;
}

var defaults = {
el: null,
form:'#fff',
to:'#000',
isShade:true
}

options = _extend(defaults, options || {});

if (!options.el) return;

var el = options.el,
style = getCurrentStyle(el),
width = parseInt( style.width),
height = parseInt(style.height) ,
h = height* 1.5;

return {
init: function() {
var fragment = document.createDocumentFragment();
var from = color2Rgb(options.form),
to = color2Rgb(options.to),
text = el.innerText || el.textContent;
for (var i = 0; i < h; i++) {
var color = gradientColor(from,to,h,i+1);
var span = document.createElement('span');
span.innerHTML = '<span style="display:block; position: relative; height:1px; overflow:hidden; top: 0; z-index:5;color:'+ color +'"><span style="display:block; position:absolute;top:'+ (-i-1) +'px;">'+text+'</span></span>';
fragment.appendChild(span.childNodes[0]);
span=null;
}
el.style.position='relative';
el.style.width = width+'px';
el.style.height = height+'px';
el.innerHTML ='';
el.appendChild(fragment);
}
}
}