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)文章
基于Bootstrap仿淘寶分頁控件實(shí)現(xiàn)代碼
這篇文章主要介紹了基于Bootstrap仿淘寶分頁控件實(shí)現(xiàn)代碼，本文分步驟給大家介紹的非常詳細(xì)，感興趣的朋友參考下吧2016-11-11
js中將時(shí)間戳轉(zhuǎn)化成YYYY-MM-DD?HH:mm:ss的3種實(shí)現(xiàn)辦法
最近開發(fā)中需要和后端進(jìn)日期和時(shí)間傳值,前后端約定為時(shí)間戳的格式,但是前端展示需要展示成年-月-日的格式,就需要進(jìn)行日期和時(shí)間轉(zhuǎn)換格式,這篇文章主要給大家介紹了關(guān)于js中將時(shí)間戳轉(zhuǎn)化成YYYY-MM-DD?HH:mm:ss的3種實(shí)現(xiàn)辦法,需要的朋友可以參考下2024-06-06
onerror事件用來協(xié)助處理頁面中的JavaScript錯(cuò)誤主要包括：Window.onerror事件,img載入錯(cuò)誤，接下來為大家詳細(xì)介紹下，感興趣的朋友可以參考下哈2013-04-04
iView 主要服務(wù)于 PC 界面的中后臺(tái)業(yè)務(wù)，是一套高質(zhì)量的開源 UI 組件庫。這篇文章主要介紹了iView 上傳組件之手動(dòng)上傳功能,需要的朋友可以參考下2018-03-03
基于JavaScript實(shí)現(xiàn)除夕煙花秀與隨機(jī)祝福語
新年即將來臨，本文將為大家介紹一個(gè)基于JavaScript實(shí)現(xiàn)的頁面特效：煙花秀+春節(jié)隨機(jī)祝福語。文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-01-01
JS前端框架關(guān)于重構(gòu)的失敗經(jīng)驗(yàn)分享
關(guān)于重構(gòu)JS前端框架的失敗經(jīng)驗(yàn)接下來與大家分享一下，感興趣的你可不要錯(cuò)過了哈，畢竟是經(jīng)驗(yàn)之談哈2013-03-03
javascript實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)拖動(dòng)效果實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)拖動(dòng)效果,實(shí)例分析了javascript鼠標(biāo)拖動(dòng)效果的相關(guān)要點(diǎn)與實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
解析javascript圖片懶加載與預(yù)加載的分析總結(jié)
本篇文章介紹了javascript圖片懶加載與預(yù)加載的分析，詳細(xì)的介紹了懶加載和預(yù)加載的問題，有需要的可以了解一下。2016-10-10
這篇文章主要介紹了JS操作HTML自定義屬性的方法,以實(shí)例形式分析了html中自定義屬性的設(shè)置與對(duì)應(yīng)的javascript操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
JS實(shí)現(xiàn)圖片元素轉(zhuǎn)BASE64編碼的簡(jiǎn)單示例
在Web開發(fā)中,我們經(jīng)常需要將圖片轉(zhuǎn)換為Base64格式,以便在不依賴外部資源的情況下直接在HTML中使用,在這篇文章中,我將向您展示如何使用JavaScript將圖片元素轉(zhuǎn)BASE64編碼,需要的朋友可以參考下2023-12-12