search

Home >Web Front-end >JS Tutorial >js Clip whimsical colorful gradient word effect_javascript skills

js Clip whimsical colorful gradient word effect_javascript skills

WBOY
WBOYOriginal
2016-05-16 18:59:021045browse

Previously, the Clip attribute was used to splice the upper and lower halves of the text with different colors.
Colorful gradient fonts, compatible with all major browsers.
The only really useful function in page JS is the colorful() function:

Copy code The code is as follows:

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;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);
}
}

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Encapsulates a JS class (clip) that automatically generates gradient words_javascript skillsNext article：Encapsulates a JS class (clip) that automatically generates gradient words_javascript skills

Related articles

See more