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