js クリップの気まぐれなカラフルなグラデーション ワード効果_javascript スキル

以前は、Clip 属性を使用して、テキストの上半分と下半分を異なる色でつなぎ合わせていました。
すべての主要ブラウザと互換性のあるカラフルなグラデーション フォント。
ページ JS で本当に役立つ唯一の関数は、colorful() 関数です。

コードをコピー コードは次のとおりです。

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="" font "";
var num = boxObj.getElementsByTagName("a")[0].scrollWidth;
boxObj.innerHTML="";
for( var i=0;ivar j=i 1;
var c=Math.round(255/num*i);
switch(Number(type))
ケース 0: r=c;g=c;b=c;ブレーク;
ケース 1:r=c;ブレーク;
ケース 2:g=c;ブレーク; b=c;break;
}
var iObj = document.createElement("A");
iObj.style.clip="rect(auto " j " px auto " i "px )";
iObj.style.color="rgb(" r "," g "," b ")";
iObj.href="#";
boxObj .appendChild(iObj);
}
}

CLIP はカラーグラデーションフォントを実装します <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> </title> <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 "榛</style>