首页
所有分类
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的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变）
Sep 15 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
请求时token过期自动刷新token操作
Sep 11 Javascript
使用JS实现简易计算器
Jun 14 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
jenkins(1) UV(1) 线程(1) PV(1) 内存(1) 进程假死(1) 连接数(1) 访问日志(2) ipv6(1) 弱口令(1)
You might like
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
Python中3种内建数据结构：列表、元组和字典
2014/11/30 Python
python自带的http模块详解
2016/11/06 Python
Python文件的读写和异常代码示例
2017/10/31 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
马克华菲官方商城：Mark Fairwhale
2016/09/04 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
三万活动总结
2014/04/28 职场文书
英语课外活动总结
2014/08/27 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
法律意见书范本
2015/06/04 职场文书
农村老人去世追悼词
2015/06/23 职场文书
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
Python开发简易五子棋小游戏
2022/05/02 Python
使用Django框架创建项目
2022/06/10 Python
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS