<!DOCTYPE html>

<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>

DIV+CSS+JS实现色彩渐变字体的更多相关文章

  1. 下拉的DIV+CSS+JS二级树型菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

  3. HTML,DIV+CSS,js,JQ,UI-WEB前端设计经验

    目前比较全的CSS重设(reset)方法总结   在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览 ...

  4. DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码

    (含上下左右滚动代码) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  5. 美工代码注意事项（html+div+css+js）

    window.location.href的target控制 在使用框架时,经常会对框架子页面进行页面引导的情况,如果只是简单的设置location. href="",会使得整个页面 ...

  6. 27款后台管理页面设计 DIV+CSS+JS

    -----------. 演示: http://www.websjy.com/club/websj ... _61040268/index.htm http://www.websjy.com/club ...

  7. 利用div+css实现九宫格，然后用js实现点击每个格子可以随机更改格子(div)的背景颜色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. DIV+CSS系统学习：转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

  9. 文字添加响应事件，js动态加载CSS, js弹出DIV

    文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

随机推荐

  1. 修改centos服务器时区并同步最新时间

    rm -rf /etc/localtime ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime ntpdate cn.pool.ntp.org ...

  2. touch.js - 移动设备上的手势识别与事件库

    Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.Touch.js手势库专为移动设备设计.Touch.js对于网页设计师来说,是一款不 ...

  3. HDU 1723 Distribute Message DP

    The contest’s message distribution is a big thing in prepare. Assuming N students stand in a row, fr ...

  4. 记录一个 C# 导出 Excel 的坑

    Ø  简介 其实该文章并没有什么技术含量,只是记录下个人心得.在以后有朋友遇到类似问题,可以借鉴下,或者遇到相同问题时的提供个参考方向. 也算我的一个经历吧,这个问题我花了足足一天多的时间才找到问题, ...

  5. java架构之路-（tomcat网络模型）简单聊聊tomcat（一）

    tomcat使我们熟知的也是我们使用最多的web服务器了,至少我是使用最多的.常见的web服务器还有Apache,web logic,JBOSS等,对于tomcat的安装我就不再赘述了,简单的不能再简 ...

  6. 修复dtcms5.0后台管理编辑器上传视频和图片被过滤问题

    1.原程序代码调用上传接口文件路径更改为父节点相对路径: 2.修复ueditor.config.js配置: img: ['src', 'alt', 'title', 'width', 'height' ...

  7. Linux CentOS内核升级

    1. 说明 正在使用的阿里云服务器报了几个内核漏铜,使用自带[一键修复]需要额外的支付费用,所以尝试采用升级系统内核的方式来修复漏洞. 1.1 服务器参数 操作系统:CentOS 7.4 64位 当前 ...

  8. MySQL问题记录——定义timestamp类型的数据

    MySQL问题记录——定义timestamp类型的数据 摘要:本文主要记录了在使用MySQL的过程中定义timestamp类型数据时遇到的问题以及解决方案. 问题重现 在Windows环境下安装MyS ...

  9. JavaScript Location 对象用法

    Location 对象 Location对象包含有关当前URL的信息.location对象是window对象的一部分,可以通过window.location属性访问. 注意:没有适用于location ...

  10. ASCII，Unicode，UTF-8，GBK 区别

    编码历史与区别 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物.他们看到8个开关状态是好的,于是他们把这称为"字节". 再后来,他们又 ...