神奇！js+CSS+DIV實(shí)現(xiàn)文字顏色漸變效果
更新時(shí)間：2016年03月16日 15:30:47 作者：carekee
很神奇！js+CSS+DIV實(shí)現(xiàn)文字顏色漸變效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了DIV+CSS+JS實(shí)現(xiàn)的文字顏色漸變效果，供大家參考，具體內(nèi)容如下
下面是 CSS 部分代碼：
<!--CSS代碼開(kāi)始-->
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代碼開(kāi)始--> <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="請(qǐng)?jiān)诖溯斎肽枰蓾u變色的文字" 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">相應(yīng)的數(shù)值會(huì)強(qiáng)制在0~255之間變化</span></td> </tr> </table> <div class="box" id="box"></div> <br /> <button onclick="javascript:createData()">OK，上色！</button> <br /> </div>
以下是 JavaScript 部分代碼：
// JavaScript代碼開(kāi)始
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="文字不能為空，使用默認(rèn)文字";
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實(shí)現(xiàn)色彩漸變字體</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="請(qǐng)?jiān)诖溯斎肽枰蓾u變色的文字" 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">相應(yīng)的數(shù)值會(huì)強(qiáng)制在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="文字不能為空，使用默認(rèn)文字";
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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
js（jquery）實(shí)現(xiàn)無(wú)刷新跳轉(zhuǎn)404頁(yè)面不存在效果
有時(shí)候我們希望臨時(shí)讓某個(gè)分類或者多個(gè)文章不能正常訪問(wèn)，手動(dòng)給html文件改名？或者改后臺(tái)改程序？太麻煩了。用本文的js代碼很容易實(shí)現(xiàn)，而且使用得當(dāng)很隱蔽。這篇文章主要介紹了js（jquery）實(shí)現(xiàn)無(wú)刷新跳轉(zhuǎn)404頁(yè)面不存在效果,需要的朋友可以參考下2023-04-04
隨著async/await正式納入ES7標(biāo)準(zhǔn)，越來(lái)越多的人開(kāi)始研究據(jù)說(shuō)是異步編程終級(jí)解決方案的 async/await。下面這篇文章主要給大家介紹了關(guān)于Js中async/await執(zhí)行順序的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-09-09
詳解JavaScript如何實(shí)現(xiàn)更短時(shí)間的延時(shí)函數(shù)
在項(xiàng)目開(kāi)發(fā)中,經(jīng)常能遇到需要延時(shí)執(zhí)行的需求,比如實(shí)現(xiàn)一個(gè)定時(shí)器功能,本文主要和大家介紹了JS如何實(shí)現(xiàn)更短時(shí)間的延時(shí)函數(shù),需要的可以參考下2024-03-03
淺談redux, koa, express 中間件實(shí)現(xiàn)對(duì)比解析
這篇文章主要介紹了淺談redux, koa, express 中間件實(shí)現(xiàn)對(duì)比解析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
網(wǎng)頁(yè)實(shí)時(shí)顯示服務(wù)器時(shí)間和javscript自運(yùn)行時(shí)鐘
如果每秒通過(guò)ajax加載服務(wù)器時(shí)間的話，就會(huì)產(chǎn)生大量的請(qǐng)求，于是打算使用js 來(lái)解決這個(gè)需求2014-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序制作表格的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無(wú)縫輪播圖插件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
layui 圖片上傳+表單提交+ Spring MVC的實(shí)例
今天小編就為大家分享一篇layui 圖片上傳+表單提交+ Spring MVC的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
javascript用defineProperty實(shí)現(xiàn)簡(jiǎn)單的雙向綁定方法
這篇文章主要介紹了javascript用defineProperty實(shí)現(xiàn)簡(jiǎn)單的雙向綁定方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Javascript幻燈片播放功能實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了Javascript幻燈片播放功能實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05