js Clip奇思妙想之多彩渐变字效果- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js Clip奇思妙想之多彩渐变字效果

Javascript: js支持158、159开头的手机号的验证; javascript学习网址备忘; JScript的条件编译; [原创]站长必须要知道的javascript广告代码; js实现的点击超链显示隐藏层; JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子; JavaScript 不只是脚本; 把JS与CSS写在同一个文件里的书写方法; Javascript & DHTML 实例编程（教程）基础知识; Javascript & DHTML 实例编程（教程）DOM基础和基本API; javascript实现的一个图片转移效果; 用js实现键盘方向键翻页功能的代码; js实现DIV的一些简单控制; 用CSS+JS实现的进度条效果效果; 爱恋千雪-US-AscII加密解密工具（网页加密）下载; 用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口; 非常不错的页面特效建议大家看下; javascript Zifa FormValid 0.1表单验证代码打包下载; 实现javascript的延期执行或者重复执行的两个函数; 推荐一个不错的图片浏览效果

No. « ‹ 69 70 71 72 › »

技术文章搜索

关键字

Javascript 中的 js Clip奇思妙想之多彩渐变字效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 163 ::

收藏到网摘: n/a

js Clip的奇思妙想之文字拼接效果 JS 创建对象(常见的几种方法)

本篇我们用同样的原理，把文字用CLIP属性分的更细，分别着色，然后组合到一起，实现自左到右更精确的色彩渐变。问题是文字细化分割需要用到很多很多个元素，所以这里我们要用程序来控制，自动生成这些元素。之前用Clip属性实现了文字上下两半不同色彩的拼接。
多彩渐变字，兼容所有主流浏览器。
页面JS当中真正有用的只有colorful()函数：

复制代码代码如下:

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); 
} 
} 

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CLIP实现色彩渐变字体</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="请在此输入您需要生成渐变色的文字" 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> <button onclick="javascript:createData()">渐变着色</button>
<address>
Designed by Silence,转载请注明出处
<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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

虽然IE有自己的渐变滤镜，但其他浏览器都不支持。CLIP属性的应用可以支持所有浏览器！通过程序，我们可以轻松地给每个文字副本添加CLIP属性将一段文字分割成一个一个像素，分别着色，最后组合到一起，实现多彩渐变！

js Clip的奇思妙想之文字拼接效果 JS 创建对象(常见的几种方法)

Javascript 中的 js Clip奇思妙想之多彩渐变字效果

评论 (0) All