js+css实现文字色彩渐变特效

实用文字色彩渐变效果,这个特效使用js和css来实现,可自己输入默认文字及选择文字的颜色。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>中国沃柑看武鸣,广西农产品供求信息,www.64pc.com</title>
<meta name="keywords" content="沃柑,武鸣沃柑,中国沃柑看武鸣,农产品信息,农业资讯,农产品供求信息,广西农产品供求信息,www.64pc.com" />
<meta name="description" content="www.64pc.com,武鸣,沃柑之乡,中国沃柑看武鸣,本站有广西武鸣地区大量一手农产品供求信息,服务于广大武鸣老乡农民朋友,我爱你,我的家乡!各位呗哝需要发布农产品供求信息外嘀抖!" />
<style type="text/css">
body{font:12px/1.5 arial}
h3{padding:10px;margin:0;background-color:#c00;border:1px dashed #fff;color:#fff;font:16px/1.5 arial;}
.box{position:relative;background-color:#fff;width:auto;margin:0 auto;padding:0 30px;font:700 20px/1.5 "黑体",arial;border:1px dashed #f60;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;}
address{background-color:#f1f1f1;border:1px dashed #ddd;padding:10px;font-style:normal;color:#999;}
address a,address a:visited{color:#c00;}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,以质量为核心,以实用为目的,打造一流网页特效站!zzjs.net,站长js特效。<a href="http://www.64pc.com">中国沃柑看武鸣</a>。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,305686263@qq.com,用.net打造靓站。中国沃柑看武鸣,www.64pc.com-->
<script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script>
<div style="width:800px;margin:0 auto;background-color:#FFFFCC">
<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="50" maxlength="16" value="站长特效网,专注于网页特效及广告代码,在这里输入文字。" onkeyup="setDiv()" /></td>
  </tr>
  <tr>
    <td height="30" align="right">R值:</td>
    <td><select name="rvalue" id="rvalue"></select>
    <span class="f999">初始化RGB颜色中的R值</span></td>
  </tr>
  <tr>
    <td height="30" align="right">G值:</td>
    <td><select name="gvalue" id="gvalue"></select>
      <span class="f999">初始化RGB颜色中的G值</span></td>
  </tr>
  <tr>
    <td height="30" align="right">B值:</td>
    <td><select name="bvalue" id="bvalue"></select>
      <span class="f999">初始化RGB颜色中的B值</span></td>
  </tr>
  <tr>
    <td height="30" align="right">渐变方式:</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 class="f999">相应的数值会强制在0~255之间变化</span></td>
  </tr>
</table>
<div class="box" id="box"></div>
<br />
    <button onclick="javascript:createData()">渐变着色</button>
<br />
<address>
Designed by Silence,转载请注明出处
</address>
</div>
<script type="text/javascript">
var rs = document.getElementById("rvalue");
var gs = document.getElementById("gvalue");
var bs = document.getElementById("bvalue");
function init(){
 var str;
//欢迎来到站长特效网x,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
 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();
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好b记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
function setDiv(){
 var font = document.getElementById("ctext").value;
 var dObj = document.getElementById("box");
 dObj.innerHTML=font;
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本x站收集大量高质量js代码,还有许多广告代码下载。
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);
}//欢迎来到站长d特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
function colorful(obj,font,r,g,b,type){
 var boxObj;
 if(typeof(obj)=="string"||typeof(obj)=="number"){
  boxObj =  document.getElementById(obj);
 }else{
  boxObj = obj;
 }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集d大量高质量js代码,还有许多广告代码下载。
 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;
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
   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);
 }
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,c还有许多广告代码下载。
init();
</script>
</body>
</html>


本文作者:大陆

本文链接:http://www.zzjs.net/post/770.html

特别赞助:中国沃柑看武鸣 武鸣沃柑 广西农产品供求信息

上一篇:全国省级js二级联动菜单共享

发表评论