JS Tutorial: Make color gradient and gradient effect

• Preface II (09/11/1)
  Recently saw Dean's "Convert any colour value to hex in MSIE" and finally solved the problem of obtaining the RGB value of the color according to the keyword.
  By the way, you can rearrange the programs and use the most recently collated tools library.
• Order One (09/03/11)
  Haven't written a blog for a long time, too busy. Don't have time to write complex things, and then rewrite the color gradient effect again.
  About the color effect is generally two, color gradient change and color dynamic gradient, the former in IE generally with filters to achieve.

Effect Preview :

Run Code Box
<! DOCTYPE html> <ptml xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" Content= "text/html; charset=gb2312 "/> <title>javascript color gradient and gradient effect </title> <script type=" Text/javascript "> eval ( function (p,a,c,k,e,r) {e=function (c) {return (c<62? ': E (parseint (C/62))) + ((c=c%62) >35? String.fromCharCode (c+29): c.tostring)};if (' 0 '. Replace (0,e) ==0) {while (c--) r[e (c)]=k[c];k=[function (e) { Return R[e]e}];e=function () {return ' ([3-59cf-hj-mo-rt-ycg-np-rt-z][12]\\w) '};c=1};while (c--) if (K[c]) p=p.replace ( New RegExp (' \\b ' +e (c) + ' \\b ', ' G '), k[c]); return p} (' 5 $$,$ $B, $ $A, $ $F, $ $D, $ $E, $ $S;(3 () {5 o,b,a,f,d,e,s;o=3 (ID) {4 "1L" = =1T ID? P.getelementbyid (ID): id};o.extend=3 (g,10) {h (5 Q R) {g[q]=10[q]}4 g};o.deepextend=3 (g,10) {h (5 Q R) {5 17=10[q];9 (G= ==17) continue;9 (1t 17=== "C") {G[q]=i.callee (g[q]{},17)}j{g[q]=17}}4 G}; B= (3 (k) {5 b={11:/11/.x (k) &&!/1u/.x (k), 1u:/1u/.x (k), 1m:/webkit/.x (k) &&!/1v/.x (k), 1n:/1n/.x (k), 1v :/1v/.x (K)};5 1i= ""; H5 I R b) {9 (B[i]) {1i= "1M" ==i? ": i;19}}b.18=1i&&1w (": "+1i+") [\\\\/:] ([\\\\d.] +) "). x (K) 1w.$1:" 0 "; b.ie=b.11;b.1o=b.11&&1y (b.18) ==6;b.ie7=b.11&&1y (b.18) ==7;b.1p=b.11& &AMP;1Y (b.18) ==8;4 B}) (1z.navigator.useragent.tolowercase ()); A=3 () {5 L={isarray:3 (1Q) {4 OBJECT.1R.TOSTRING.L (1Q) = = "[C 1S]"},1a:3 (c,12,p) {9 (c.1a) {4 c.1a ()}j{5 m=c.1a;p=1t (p)? 0: (p<0) 1j.1u (P) +m:1j.1v (p); H (;p <m;p++) {9 (c[i]===12) 4 I}4-1}},1b:3 (c,12,p) {9 (c.1b) {4 c.1b ()}j{5 m=c.1a;p=1t (p) p>=m-1? M-1:P&LT;0?1J.1U (P) +m:1j.1v (p); H (;p >-1;p--) {9 (c[i]===12) 4 i}4-1}}};3 X (c,q) {9 (undefined===c.1a) {h (5 F R C) {9 (w===q (c[f],f,c)) 19}}j{h (5 i=0,m= c.1a;i<m;i++) {9 (I R c) {9 (w===q (c[i],i,c)) 19}}}; X ({1w:3 (c,q,j) {X.L (j,c,3 () {q.y (j,i)})},map:3 (c,q,j) {5 l=[]; X.L (j,c,3 () {l.1x (Q.y (j,i))}); 4 L},1k:3 (c,q,j) {5 l=[]; X.L (j,c,3 (1Y) {q.y (j,i) &&l.1x (1Y)}); 4 L},every:3 (c,q,j) {5 l=1b; X.L (j,c,3 () {9 (!q.y (j,i)) {l=w;4 W}}); 4 L},some:3 (c,q,j) {5 l=w; X.L (j,c,3 () {9 (Q.y (j,i)) {l=1b;4 W}}); 4 l}},3 (1z,f) {l[f]=3 (c,q,j){9 (C[f]) {4 c[f] (q,j)}j{4 1Z (C,q,j)}}}); 4 L} (); F= (3 () {5 1c=1s.1r.1c;4{bind:3 (1l,j) {5 1m=1c. L (i,2); 4 3 () {4 1l. Y (j,1m.20 1c. L (I))}},bindaseventlistener:3 (1l,j) {5 1m=1c. L (i,2); 4 3 (g) {4 1l. Y (J,[E.1D (g)].20 (1m)}}}) ();D ={1n:3 (m) {5 13=m?m.21:p;4 13.22.2313.24.23},1o:3 (m) {5 13=m?m.21:p;4 13.22.2513.24.25 },1c:3 (a,b) {4 (u.1c=a.26?3 (a,b) {4!! (a.26 (b) &16)} : 3 (a,b) {4 a!=b&&a.1c (b)}) (A,b)},v:3 (m) {5 o=0,n=0,t=0,u=0;9 (!m.27b.1p) {5 N=m;while (N) {o+=n.offsetleft,n+= N.offsettop;n=n.offsetparent}; T=o+m.offsetwidth; U=n+m.offsetheight}j{5 v=m.27 (); o=t=u.1o (m); N=U=U.1N (m); o+=v.o; t+=v.t; N+=V.N; u+=v.u};4{"O": O, "n": N, "T": T, "U": U}},clientrect:3 (m) {5 v=u.v (m), 1d=u.1o (M), 1e=u.1n (m); U-=1e;4 V},28:3 (k) {4 (u.28=p.1p?3 (k) {4 p.1p.29 (k,2a)}:3 (k) {4 k.1q}) (k)},2b:3 (k,f) {4 (u.2b=p.1p?3 (k,f) {5 h=p.1p.29 (k) 2a) 4 F R h?h[f]:h.getpropertyvalue (f)}:3 (k,f) {5 h=k.1q;9 (f== "Z") {9 (/1f\\ (z= (. *) \)/i.x (h.1k)) {5 Z=parsefloat (1w.$1 ); 4 Z? Z/2c:0}4 1};9 (f== "2d") {f= "2e"}5 l=h[f]h[s.1g (f)];9 (!/^\\-?\\d+ (px)?$/i.x (L) &&/^\\-?\\d/.x (L)) {h=k.h,o=h.o,2g=k.1h.o;k.1h.o=k.1q.o;h.o=l0;l=h.pixelleft+ "px"; h.o=o;k.1H.o= 2g}4 L}) (K,f)},setstyle:3 (1e,h,14) {9 (!1e.1a) {1e=[1e]}9 (1t h== "1L") {5 s=h;h={};h[s]=14}a.1w (1e,3 (k) {h (5 f R h) {5 14=h[ F];9 (f== "Z" &&b.ie) {k.h.1k= (k.1q.1k ""). 2h (/1f\\ ([^)]*\\)/, "") + 1F (z= "+14*2c+") "}j 9 (f==" 2d ") {k.h[b.ie?] 2e ': ' Cssfloat ']=14}j{k.h[s.1g (f)]=14}}}}; E= (3 () {5 1f,1g,15=1;9 (1z.2i) {1f=3 (r,t,y) {r.2i (t,y,w)};1g=3 (r,t,y) {R.removeeventlistener (t,y,w)}}j{1f=3 (r,t,y) {9 (!y.$$15) y.$$15=15++;9 (!R.V) r.v={};5 w=r.v[t];9 (! W) {w=r.v[t]={};9 (r["on" +t]) {w[0]=r[' on ' +t]}}w[y.$$15]=y;r[' on ' +t]=1r};1g=3 (r,t,y) {9 (r.v&&r.v[t]) { Delete R.v[t][y.$$15]}};3 1r () {5 1s=1b,g=1d (); 5 w=u.v[g.t]; H (5 i R W) {u.$$1r=w[i];9 (U.$$1R (g) ===w) {1s=w}}4 1s}}3 1d (g) {9 (g) 4 g;g=1z.g;g.pagex=g.clientx+d.1o (); g.pagey= G.CLIENTY+D.1N (); G.target=g.srcelement;g.1j=1j;g.1k=1k;switch (g.t) {2j "mouseout": g.2k=g.toelement;19;2j " MouseOver ": G.2k=g.fromelement;19};4 g};3 1J () {u.cancelbubble=1b};3 1K () {u.1s=w};4{" 1f": 1f," 1g ": 1g," 1d ": 1d}}) (); S={1g:3 (s) {4 s.2h (/-([A-z])/ig,3 (all,2l) {4 2l.touppercase ()})}};9 (b.1o) {Try{p.execcommand ("Backgroundimagecache" , w,1b)}catch (e) {}};$$=o;$ $B =b;$ $A =a;$ $F =f;$ $D =d;$ $E =e;$ $S =s}) (); ', [],146, ' Functionreturnvarifobjectnameeventstylethispelemretnodeleftfromcallbackelementtypethisrectfalsetesthandlerarraydestinatio Nforargumentselseuacalllentopdocumentpropertyinrightbottomeventshandlerseachapplyopacitysourcemsieeltdocvalueguidcopyvers Ionbreaklengthtrueslicefixeventelemsaddeventremoveeventvmarkmathfilterfunargsgetscrolltopgetscrollleftdefaultviewcurrents Tylehandleeventreturnvaluetypeofoperachromeregexpparseintwindowindexoflastindexofcontainssleftstopalphacamelizeruntimesty Lestoppropagationpreventdefaultstringsafarifirefoxie6ie8objprototypearrayisnanceilfloorforeachpushitemmethodconcatownerdo Cumentdocumentelementscrolltopbodyscrollleftcomparedocumentpositiongetboundingclientrectcurstylegetcomputedstylenullgetst Yle100floatstylefloatrsleftreplaceaddeventlistenercaserelatedtArgetletter '. Split ("), 0,{})) </script> <script type=" Text/javascript ">//Get Color Gradient method var colorgrads = ( function () {//Get color gradient data function getstep (start, end, step) {var colors = [], start = GetColor (start), end = GetColor (end), Stepr = (end[0]-start[0])/step, STEPG = (end[1]-start[1])/step, STEPB = (end[2]-start[2))/step; Generate a color set for (var i = 0, r = start[0], G = start[1], B = start[2]; i < step; i++) {Colors[i] = [R, G, b]; r = = Stepr; g + + STEPG; B + + STEPB; } Colors[i] = end; Fixed color value return $ $A. Map (colors, function (x) {return $ $A. Map (x, function (x) {return math.min (0, Math.floor (x)), 255); });}); //Get color data var Frag; function GetColor (color) {var ret = GetData (color); if (ret = = undefined) {if (!frag) {Frag = Document.createelement (" TextArea "); Frag.style.display = "None"; Document.body.insertBefore (Frag, document.body.childnodes[0]); }; try {frag.style.color = color;} catch (e) {return [0, 0, 0];} IE Opera if (document.defaultview) {//opera#rrggbb ret = GetData (Document.defaultView.getComputedStyle (Frag, NULL). color); else {color = Frag.createtextrange (). Querycommandvalue ("ForeColor"); ret = [Color & 0x0000ff, (Color & 0x00ff0 0) >>> 8, (color & 0xff0000) >>> 16]; } return ret; }//Get color Array function GetData (colour) {var re = RegExp; if (/^# ([0-9a-f]{2}) ([0-9a-f]{2}) ([0-9a-f]{2}) $/i.test (color) {//# RRGGBB return $ $A. Map ([Re.$1, Re.$2, re.$3], function (x) {return parseint (x, 16);}); else if (/^# ([0-9a-f]) ([0-9a-f]) ([0-9a-f]) $/i.test (color)) {//#rgb return $ $A. Map ([Re.$1, Re.$2, re.$3], function (x) { return parseint (x + x, 16); }); else if (/^rgb\ (. *), (. *), (. *) \ $/i.test (color)) {//rgb (n,n,n) or RGB (n%,n%,n%) return $ $A. Map ([Re.$1, Re.$2, re.$3], function (x) {return x.indexof ("%") > 0 parsefloat (x,) * 2.55:x 0;}); } return function (colors, step) {var ret = [], len = colors.length; if (step = = undefined) {step =;} if (len = = 1) {ret = Getstep (colors[0], colors[0], step; else if (Len > 1) {for (var i = 0, n = len-1 i < n; i++) {var steps = Getstep (Colors[i), colors[i+1], step) ; I < n-1 && Steps.pop (); RET = Ret.concat (steps); } return ret; } })(); Gradient object var Colortrans = function (Elem, options) {This._elem = $$ (elem); this._timer = null;//Timer This._index = 0;//Index This . _colors = [];//color Set this._options = {};//Parameter object this._setoptions (options); this.speed = Math.Abs (this.options.speed); This.style = This.options.style; This.reset ({from:this.options.from $ $D. GetStyle (This._elem, This.style), To:this.options.to, Step:Math.abs ( This.options.step)}); This._set (); }; Colortrans.prototype = {//Set default property _setoptions:function (options) {this.options = {//default value from: "",//Start color (default null is easy to get automatically) to: #000,//End Color step:20,//Gradient series speed:20,//gradient speed style: "Color"//Set Property (Scripting property)}; $$.extend (This.options, Options {}); },//Reset Color set reset:function (options) {////Set properties based on parameters this._options = options = $$.extend (This._options, Options {}); Gets the color set this._colors = Colorgrads ([Options.from, options.to], options.step); This._index = 0; },//color fades into transin:function () {this.stop (); this._index++; This._set (); if (This._index < this._colors.length-1) {thi S._timer = settimeout ($ $F. Bind (This.transin, this), this.speed); },///color fades out transout:function () {this.stop (); this._index--this._set (); if (This._index > 0) {this._timer = Settimeo UT ($ $F. Bind (This.transout, this), this.speed); },///color settings _set:function () {var color = this._colors[math.min (Math.max (0, This._index), this._colors.length-1)]; . _elem.style[this.style] = "RGB (" + Color.join (",") + ")";},//Stop stop:function () {cleartimeout (this._timer);}; </script> </pead> <body> <style type= "Text/css" > #idGrads Div{height:1px;overflow:hidden;} </style> Color Gradient Demo: <div id= "Idgrads" > </div> <br/> <input id= "Idgradscolor" type= "text" Value= "green"/> <input id= "Idgradsset" type=Ton "value=" Set color > <script> ($$ ("Idgradsset"). onclick = function () {var colors = colorgrads ([#fff, $$ ("Idgrad Scolor "). value], 50); $$ ("Idgrads"). InnerHTML = $ $A. Map (Colors.concat (). Concat (Colors.reverse ()), function (x) {return "<div style=" Background:rgb ("+ X.join (", ") +") ' ></div> ';}). Join ("");}) () </script> <br/> <br/> <style type= "text/css" > #idPicker ul{float:left;} #idPicker Li{overflo w:hidden;width:10px;height:10px;line-height:0;font-size:0;} #idPicker li.on{width:8px;height:8px border:1px solid #000;} #idPicker ul, #idPicker li{list-style:none;margin:0; padding:0;} #idPicker: After{content: "."; Display:block;visibility:hidden;height:0;clear:both;} #idPicker {zoom:1} </style> simple color picker: <br/> Select color: <span id= "Idpickershow" > </span> <div id= " Idpicker "> </div> <script> $$ (" Idpicker "). InnerHTML =" <ul> "+ $ $A. Map (Colorgrads ([" Red "," yellow "," blue "], function (x) {return $ $A. Map(Colorgrads (["#fff", "RGB (" + X.join (",") + ")", "#000"], function (x) {return "<li style= ' Background:rgb (" + X.J Oin (",") + ") ' ></li>"; }). Join ("");}). Join ("</ul><ul>") + "</ul>"; var opickershow = $$ ("Idpickershow"); $ $A. ForEach ($$ ("Idpicker"). getElementsByTagName ("Li"), function (li) {li.onmouseover = function () {this.classname = " On "; opickershow.innerhtml = OPickerShow.style.backgroundColor = This.style.backgroundColor; } li.onmouseout = function () {this.classname = "";}}) </script> <br/> <br/> <style type= "Text/css" > #idMenu {background: #DBDBDB; text-align:center; line-height:25px; table-layout:fixed;} #idMenu td{cursor:pointer color: #666; background: #f6f6f6} </style> Color Gradient menu: <table id= "Idmenu" width= "600" Border= "0" cellspacing= "5" cellpadding= "0" > <tr> <td><a href= "http://www.cnblogs.com/cloudgamer/ Archive/2008/07/21/imgcropper.html ">Cropper</a></td> <td><a href="Http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html ">Tween</a></td> <td><a href= "http://www.cnblogs.com/cloudgamer/archive/2008/12/24/Slider.html" >Slider</a></td> <td ><a href= "http://www.cnblogs.com/cloudgamer/archive/2008/12/03/Resize.html" >resize</a></td > <td><a href= "http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html" >Drag</a>< /TD> <td><a href= "http://www.cnblogs.com/cloudgamer/archive/2009/07/07/FixedTips.html" >tooltips </a></td> </tr> </table> <script> $ $A. ForEach ($$ ("Idmenu"). getElementsByTagName ("TD" ), function (x, i) {var a = X.getelementsbytagname ("a") [0], href = a.href, txt = a.innerhtml; x.onclick = function () {Locat ion.href = href; } x.innerhtml = txt; var ct1 = new Colortrans (x, {to: "white"}); var ct2 = new Colortrans (x, {to: rgb (20,150,0), Style: "BackgroundColor"}); X.onmouseover = function () {ct1.transin (); Ct2.traNsin (); } x.onmouseout = function () {ct1.transout (); Ct2.transout ();}}) </script> <br/> <br/> <style type= "Text/css" > #idRandom {padding:10px; background: #CCC; color: #fff;} </style> Click Random Color gradient: <div id= "Idrandom" ><b> Click to change color </b></div> <script> var ctrandom = new Colortrans ("Idrandom", {style: "BackgroundColor"}), CtRandom2 = new Colortrans ("Idrandom"); $$ ("Idrandom"). onclick = function () {var RGB = $ $A. Map ([1,1,1], function () {return Math.floor (math.random () * 255);}) , Rgb2 = $ $A. Map (RGB, function (x) {return 255-x;}); Ctrandom.reset ({from:this.style.backgroundColor, to: "RGB (" + Rgb.join (",") + ")"}) Ctrandom.transin (); Ctrandom2.reset ({from:this.style.color, to: "RGB (" + Rgb2.join (",") + ")"}) Ctrandom2.transin ();} </script> </body> </ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]