js Clip奇思妙想之多彩漸變字效果
更新時(shí)間：2008年11月02日 00:17:30 作者：
本篇我們用同樣的原理，把文字用CLIP屬性分的更細(xì)，分別著色，然后組合到一起，實(shí)現(xiàn)自左到右更精確的色彩漸變。問題是文字細(xì)化分割需要用到很多很多個(gè)元素，所以這里我們要用程序來控制，自動(dòng)生成這些元素。
之前用Clip屬性實(shí)現(xiàn)了文字上下兩半不同色彩的拼接。
多彩漸變字，兼容所有主流瀏覽器。
頁面JS當(dāng)中真正有用的只有colorful()函數(shù)：
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);
}
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
雖然IE有自己的漸變?yōu)V鏡，但其他瀏覽器都不支持。CLIP屬性的應(yīng)用可以支持所有瀏覽器！通過程序，我們可以輕松地給每個(gè)文字副本添加CLIP屬性將一段文字分割成一個(gè)一個(gè)像素，分別著色，最后組合到一起，實(shí)現(xiàn)多彩漸變！
多彩漸變字，兼容所有主流瀏覽器。
頁面JS當(dāng)中真正有用的只有colorful()函數(shù)：
復(fù)制代碼 代碼如下:
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);
}
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
雖然IE有自己的漸變?yōu)V鏡，但其他瀏覽器都不支持。CLIP屬性的應(yīng)用可以支持所有瀏覽器！通過程序，我們可以輕松地給每個(gè)文字副本添加CLIP屬性將一段文字分割成一個(gè)一個(gè)像素，分別著色，最后組合到一起，實(shí)現(xiàn)多彩漸變！
您可能感興趣的文章:
相關(guān)文章
本篇文章主要是對(duì)JS中document對(duì)象的一些重要屬性進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-03-03
使用javascript實(shí)現(xiàn)有效時(shí)間的控制,并顯示將要過期的時(shí)間
本篇文章主要介紹了使用javascript實(shí)現(xiàn)有效時(shí)間的控制,并顯示將要過期的時(shí)間示例代碼。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
layui自定義插件citySelect實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)選擇
這篇文章主要為大家詳細(xì)介紹了layui自定義插件citySelect實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)選擇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家介紹了前端JS可視化學(xué)習(xí)利用向量判斷多邊形邊界示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-12-12
流行的 JavaScript 庫有jQuery，MooTools，Prototype，Dojo和YUI等，這些 JavaScript 庫功能豐富，加上它們眾多的插件，幾乎能實(shí)現(xiàn)任何你需要的功能2011-06-06
javascript原型鏈學(xué)習(xí)記錄之繼承實(shí)現(xiàn)方式分析
這篇文章主要介紹了javascript原型鏈學(xué)習(xí)記錄之繼承實(shí)現(xiàn)方式,結(jié)合實(shí)例形式分析了javascript使用原型鏈實(shí)現(xiàn)繼承的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-05-05
JavaScript中合并Object的三種基本方法小結(jié)
在開發(fā)過程中,我們經(jīng)常會(huì)遇到合并對(duì)象的需求,今天我們就來了解一下合并對(duì)象的幾種基本方法,文中通過代碼示例介紹的非常詳細(xì),感興趣的小伙伴跟著小編一起來看看吧2023-08-08
這篇文章主要給大家介紹了關(guān)于JavaScript淺層克隆與深度克隆的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
在使用原生框架開發(fā)小程序時(shí)遇到一個(gè)問題，在 app.wxss 中定義的全局樣式在自定義組件中不生效，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-08-08
這篇文章主要為大家詳細(xì)介紹了基于Echarts實(shí)現(xiàn)餅圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05