JS Clip idea of the colorful gradient word effect _javascript skills

Source: Internet
Author: User
Before using the clip attribute to achieve the text up and down two different color stitching.
Colorful gradient word, compatible with all major browsers.
Page JS is really useful only colorful () function:
Copy Code code 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= "<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);
}
}

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>clip implementation Color Gradient font </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 "boldface", arial;border:1px dashed #f60; height:30px;margin-top:8px; . box A{position:absolute;font-style:normal;white-space:nowrap; . F999{color: #999;} A:link{text-decoration:none;} A:hover{text-decoration:underline;} A:visited{text-decoration:none;} Address{background-color: #f1f1f1; border:1px dashed #ddd;p adding:10px;font-style:normal;color: #999;} Address a,address A:visited{color: #c00;} </style> &LT;/HEAD&GT <body> <div > <p><strong>css Colorful gradient word </strong></p> <table width= "100%" border= " 0 "cellspacing=" 0 "cellpadding=" 0 "> <tr> <td height=" Ten "colspan=" 2 "align=" center "></td> </tr > <tr> <td width= "19%" height= "align=" right "> Text:</td> <td width=" 81% "><input name=" t Ext "type=" text "id=" Ctext "size=" maxlength= "value=" Please enter the text you need to generate gradients "onkeyup=" Setdiv () "/></td> < /tr> <tr> <td height= "a" align= "right" >r value:</td> <td><select name= "rvalue" id= "Rvalue" & gt;</select> <span class= "f999" > Initialize R value in RGB color </span></td> </tr> <tr> <td height= "align=" "right" >g value:</td> <td><select name= "Gvalue" id= "Gvalue" ></select> < Span class= "f999" > Initialize g value in RGB color </span></td> </tr> <tr> <td height= "align=" right >b value:</td> <td><select name= "bValue "id=" bvalue ></select> <span class= "f999" > Initialize the b value in RGB color </span></td> </tr> <tr> <td height= "align=" "right" > Gradient:</td> <td><select name= "CType" id= "CType" >< Option value= "0" > Grayscale gradient </option><option value= "1" selected= "selected" > Change r value </option><option Value= "2" > Change g Value </option><option value= "3" > Change b value </option></select> <span class= "f999" > The corresponding value will force the change between 0~255 </span></td> </tr> </table> <div class= "box" id= "box" ></div& Gt     <button onclick= "Javascript:createdata ()" > Gradient coloring </button>   <address > Designed by silence, reproduced please indicate the source http://www.silentash.com/?id=109 </address> </div> <script type= "t Ext/javascript "> var rs = document.getElementById (" Rvalue "); var GS = document.getElementById ("Gvalue"); var bs = document.getElementById ("bvalue"); function init () { var str; for (Var i=0;i<=255;i++) {var opr = document.createelement ("option"); var OPG = document.createelement ("option"); var OPB = document.createelement ("option"); opr.innerhtml = i; opg.innerhtml = i; opb.innerhtml = i; switch (i) {case 100:opb.selected= "selected"; Case 200:opg.selected= "selected"; } gs.appendchild (OPG); Rs.appendchild (OPR); Bs.appendchild (OPB); } setdiv (); function Setdiv () {var font = document.getElementById ("Ctext"). Value; var dobj = document.getElementById ("box"); Dobj.innerhtml=font; function Createdata () {var font = document.getElementById ("Ctext"). Value; var r = Rs.options[rs.selectedindex].text; var g = Gs.options[gs.selectedindex].text; var B = bs.options[bs.selectedindex].text; var type = document.getElementById ("CType"). Value; if (font== "" | | font== "undefined") {"Text cannot be empty, use default text"; document.getElementById ("Ctext"). Value = font; } Colorful (' box ', font,r,g,b,type); 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); } Init (); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Although IE has its own gradient filter, it is not supported by other browsers. The application of the clip attribute can support all browsers! Through the program, we can easily add clip attributes to each copy of text to split a piece of text into one pixel, respectively, color, and finally combined to achieve a colorful gradient!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.