网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料:

 

标题 神奇!js+CSS+DIV实现文字颜色渐变效果
内容
    本文实例为大家分享了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>
    <h3><strong>CSS多彩渐变字</strong></h3>
    <table cellspacing="0" cellpadding="0">
     <tr>
      <td height="10" colspan="2"></td>
      </tr>
     <tr>
      <td width="19%" height="30">文字:</td>
      <td width="81%"><input name="text" type="text" id="ctext" size="30" maxlength="16" value="请在此输入您需要生成渐变色的文字" onkeyup="setDiv()" /></td>
     </tr>
     <tr>
      <td height="30">R值:</td>
      <td><select name="Rvalue" id="rvalue"></select>
      <span>RGB颜色中的R值(0-255)</span></td>
     </tr>
     <tr>
      <td height="30">G值:</td>
      <td><select name="Gvalue" id="gvalue"></select>
       <span>RGB颜色中的G值(0-255)</span></td>
     </tr>
     <tr>
      <td height="30">B值:</td>
      <td><select name="Bvalue" id="bvalue"></select>
       <span>RGB颜色中的B值(0-255)</span></td>
     </tr>
     <tr>
      <td height="30">渐变方式:</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>相应的数值会强制在0~255之间变化</span></td>
     </tr>
    </table>
    <div 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();
    完整代码:
    <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>
    <h3><strong>CSS多彩渐变字</strong></h3>
    <table cellspacing="0" cellpadding="0">
     <tr>
      <td height="10" colspan="2"></td>
      </tr>
     <tr>
      <td width="19%" height="30">文字:</td>
      <td width="81%"><input name="text" type="text" id="ctext" size="30" maxlength="16" value="请在此输入您需要生成渐变色的文字" onkeyup="setDiv()" /></td>
     </tr>
     <tr>
      <td height="30">R值:</td>
      <td><select name="Rvalue" id="rvalue"></select>
      <span>RGB颜色中的R值(0-255)</span></td>
     </tr>
     <tr>
      <td height="30">G值:</td>
      <td><select name="Gvalue" id="gvalue"></select>
       <span>RGB颜色中的G值(0-255)</span></td>
     </tr>
     <tr>
      <td height="30">B值:</td>
      <td><select name="Bvalue" id="bvalue"></select>
       <span>RGB颜色中的B值(0-255)</span></td>
     </tr>
     <tr>
      <td height="30">渐变方式:</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>相应的数值会强制在0~255之间变化</span></td>
     </tr>
    </table>
    <div 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>
    以上就是本文的全部内容,希望对大家的学习有所帮助。
随便看

 

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/12 22:01:21