首页 / JAVASCRIPT / js Clip奇思妙想之多彩渐变字效果

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js Clip奇思妙想之多彩渐变字效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2119字，纯文字阅读大概需要4分钟。

内容图文

之前用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> 
 
<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>

http://www.silentash.com/?id=109 
</address> 
 
<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=""+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"); 
        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 全选注:如需引入外部Js需刷新才能执行]
虽然IE有自己的渐变滤镜，但其他浏览器都不支持。CLIP属性的应用可以支持所有浏览器！通过程序，我们可以轻松地给每个文字副本添加CLIP属性将一段文字分割成一个一个像素，分别着色，最后组合到一起，实现多彩渐变！

内容总结

以上是互联网集市为您收集整理的js Clip奇思妙想之多彩渐变字效果全部内容，希望文章能够帮你解决js Clip奇思妙想之多彩渐变字效果所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/374083.html

来源：【匿名】

【上一篇】初学Javascript的一些总结【下一篇】javascript 怎么调用php方法

更多 ►

【js Clip奇思妙想之多彩渐变字效果】教程文章相关的互联网学习教程文章

javascript – 用于圆圈的HTML5 Canvas ctx.clip()方法在圆圈下方留下一条线【代码】

我已经创建了一个生成行星精灵的程序.我这样做是通过创建一个圆形路径,运行ctx.clip()来保持所有以下图层在圆圈内,然后绘制一个黑色和透明的纹理图层,然后在整个画布上随机着色的矩形,然后是阴影并在它上面发光.问题是裁剪后圆圈下面也会出现彩色线条,我不知道为什么.我需要删除它. 这是一个小提琴.最后一行设置代码每半秒循环：https://jsfiddle.net/tzkwmzqu/4/解决方法:我不确定我是否理解你的问题,但我会假设你在谈论anti-alia...

封装了一个自动生成渐变字的JS类(clip)_javascript技巧【图】

你需要做的只是在HTML页面里面把需要用到渐变色的文字加上外容器（span标签或者a标签都可以），再给这个标签加入name属性做渐变元素的标示，rel属性指示渐变的颜色，rel属性的格式很重要：代码如下:rel="#十六进制颜色-#十六进制颜色" 少一个或多一个字符都不行。CSS+JS多彩渐变字 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;} p{font...