Tip: You can modify some of the code before running
JavaScript color gradients and gradient effects <! 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= ""; H (5 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& &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<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.23| | 13.24.23},1o:3 (m) {5 13=m?m.21:p;4 13.22.25| | 13.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.27| | b.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=l| | 0;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, ' | | | function|return|var| | | | if| | | object| | | name|event|style| | thisp|elem|ret|node| | left|from|callback|element| | type|this|rect|false|test|handler| | | | array| | | | destination|for|arguments|else|ua|call|len|top| | document|property|in| | right|bottom|events|handlers|each|apply|opacity|source|msie|elt|doc|value|guid| | copy|version|break|length|true|slice|fixevent|elems|addevent|removeevent| | vmark| math|filter|fun|args|getscrolltop|getscrollleft|defaultview|currentstyle|handleevent|returnvalue|typeof|opera| chrome| regexp| | parseint|window|indexof|lastindexof|contains|sleft|stop|alpha|camelize|runtimestyle| | stoppropagation|preventdefault|string|safari|firefox|ie6|ie8|obj|prototype| Array|isnan|ceil|floor|foreach|push|item|method|concat|ownerdocument|documentelement|scrolltop|body|scrollleft|comparedocumentposition|getboundingclientrect|curstyle|getcomputedstyle|null|getstyle|100| float|stylefloat| | Rsleft|replace|addeventlistener|case|relatedtarget|letter '. Split (' | '), 0,{})) </script> <script type= " Text/javascript ">//Get Color Gradient method var colorgrads = (function () {//Get color gradient data function getstep (start, end, step) {var colo rs = [], 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 + = Step R 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 & 0x00ff00) >>> 8, (color & 0xff0000) >>> 16]; } return ret; }//Get color Array function GetData (color) {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], F Unction (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], functi On (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 ("%") &G T 0? Parsefloat (x, ten) * 2.55:x | 0; }); } return function (colors, step) {var ret = [], len = colors.length; if (step = = undefined) {step = 20;} 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 Collection this._options = {};//Parameter Object This._setoptions (OP tions); 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 value for automatic acquisition 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) {This._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 = settimeout ($ $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)]; This._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= "button" value= "Set Color" > <script> ($$ ("Idgradsset"). onclick = function () {var colors = colorgrads (["#fff", $$ ("Idgradscolor"). value], 50); $$ ("Idgrads"). InnerHTML = $ $A. Map (Colors.concat (). Concat (Colors.reverse ()), function (x) {return <div + 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 ([" #fff "," RGB ("+ X.join (" colorgrads ") +") "," #000 "], Functi On (x) {return "<li + x.join (", ") +") ' ></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>Cropper</td> <td>Tween</td> & lt;td>slider</td> <td>Resize</td> <td>Drag</td> <td>Tooltips</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 () {location.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>
Tip: You can modify some of the code before running
