首页
所有分类
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 UI CSS Framework开发Widget的经验
Aug 21 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
js禁止表单重复提交
Aug 29 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
JS实现灯泡开关特效
Mar 30 Javascript
js实现中文实时时钟
Jan 15 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 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
vue-cli3.x(1) 项目打包(2) Jmerte(1) 自定义组件(1) Yolov5(1) vue-router-link(1) TimePickerView(1) KVM(1) scss(1) click(1)
You might like
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP网站常见安全漏洞，及相应防范措施总结
2021/03/01 PHP
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
jquery ztree异步搜索（搜叶子）实践
2016/02/25 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
python3实现ftp服务功能（客户端）
2017/03/24 Python
python素数筛选法浅析
2018/03/19 Python
详解Python发送email的三种方式
2018/10/18 Python
python实现图片筛选程序
2018/10/24 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
详解python和matlab的优势与区别
2019/06/28 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
德国孕妇装和婴童服装网上商店：bellybutton
2018/04/12 全球购物
经典c++面试题六
2012/01/18 面试题
岗位竞聘演讲稿
2014/01/10 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
支部鉴定材料
2014/06/02 职场文书
先进班组材料范文
2014/12/25 职场文书
安全生产奖惩制度
2015/08/06 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
导游词之吉林花园山
2019/10/17 职场文书
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS
Hive日期格式转换方法总结
2022/06/25 数据库