首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

神奇！js+CSS+DIV实现文字颜色渐变效果

Posted in Javascript onMarch 16, 2016

本文实例为大家分享了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;
 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:400px;margin:200px auto;background-color:#f2f2f2;border: 1px dashed #ccc;">
<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" style="font:12px Microsoft Yahei" value="请在此输入您需要生成渐变色的文字" onkeyup="setDiv()" /></td>
 </tr>
 <tr>
  <td height="30" align="right">R值：</td>
  <td><select name="Rvalue" style="font:12px Microsoft Yahei" id="rvalue"></select>
  <span class="f999">RGB颜色中的R值（0-255）</span></td>
 </tr>
 <tr>
  <td height="30" align="right">G值：</td>
  <td><select name="Gvalue" style="font:12px Microsoft Yahei" id="gvalue"></select>
   <span class="f999">RGB颜色中的G值（0-255）</span></td>
 </tr>
 <tr>
  <td height="30" align="right">B值：</td>
  <td><select name="Bvalue" style="font:12px Microsoft Yahei" id="bvalue"></select>
   <span class="f999">RGB颜色中的B值（0-255）</span></td>
 </tr>
 <tr>
  <td height="30" align="right">渐变方式：</td>
  <td><select name="ctype" style="font:12px Microsoft Yahei" 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()">OK，上色！</button>
<br />
 
</div>

以下是 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 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+"";
 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();

效果图：

 神奇！js+CSS+DIV实现文字颜色渐变效果

完整代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+CSS+JS实现色彩渐变字体</title>
<style type="text/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;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;}
a:link{text-decoration:none;}
a:hover{text-decoration:underline;}
a:visited{text-decoration:none;}
</style>
</head>
<body>
<div style="width:400px;margin:200px auto;background-color:#f2f2f2;border: 1px dashed #ccc;">
<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" style="font:12px Microsoft Yahei" value="请在此输入您需要生成渐变色的文字" onkeyup="setDiv()" /></td>
 </tr>
 <tr>
  <td height="30" align="right">R值：</td>
  <td><select name="Rvalue" style="font:12px Microsoft Yahei" id="rvalue"></select>
  <span class="f999">RGB颜色中的R值（0-255）</span></td>
 </tr>
 <tr>
  <td height="30" align="right">G值：</td>
  <td><select name="Gvalue" style="font:12px Microsoft Yahei" id="gvalue"></select>
   <span class="f999">RGB颜色中的G值（0-255）</span></td>
 </tr>
 <tr>
  <td height="30" align="right">B值：</td>
  <td><select name="Bvalue" style="font:12px Microsoft Yahei" id="bvalue"></select>
   <span class="f999">RGB颜色中的B值（0-255）</span></td>
 </tr>
 <tr>
  <td height="30" align="right">渐变方式：</td>
  <td><select name="ctype" style="font:12px Microsoft Yahei" 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()">OK，上色！</button>
<br />
 
</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>

以上就是本文的全部内容，希望对大家的学习有所帮助。

神奇！js+CSS+DIV实现文字颜色渐变效果

- Author -

carekee

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery AjaxQueue改进步骤
Oct 06 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 Javascript
js获取时间精确到秒（年月日）
Mar 16 #Javascript
js实现内容显示并使用json传输数据
Mar 16 #Javascript
javascript中arguments,callee,caller详解
Mar 16 #Javascript
Bootstrap每天必学之滚动监听
Mar 16 #Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 #Javascript
Jquery技巧(必须掌握)
Mar 16 #Javascript
Javascript的表单验证长度
Mar 16 #Javascript
党团范文(807) 汇报材料(247) 报告(147) 计划(88) 导游词(322) 口号(179) 开幕词(63) 慰问信(53) 闭幕词(9) 工作总结(1972)
You might like
一棵php的类树(支持无限分类)
2006/10/09 PHP
php include类文件超时问题处理
2015/02/06 PHP
php while循环控制的简单实例
2016/05/30 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
微信小程序入门教程
2016/11/18 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
python中模块查找的原理与方法详解
2017/08/11 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
在python中实现对list求和及求积
2018/11/14 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
澳大利亚床上用品、浴巾和家居用品购物网站：Bambury
2020/04/16 全球购物
自主招生教师推荐信
2014/05/10 职场文书
安全承诺书格式
2014/05/21 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
预备党员群众意见
2015/06/01 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
教师读书活动心得体会
2016/01/14 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python