Tip: you can modify some code before running
JavaScript color gradient and gradient effect<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><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 (36)}; 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-rjrt-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" = 1 t id? P. getElementById (id): id}; O. extend = 3 (G, 10) {H (5 q r 10) {G [Q] = 10 [Q]} 4G}; O. deepextend = 3 (G, 10) {H (5 q r 10) {5 17 = 10 [Q]; 9 (G = 17) continue; 9 (1 t 17 = "c") {G [Q] = I. callee (G [Q] | |{}, 17)} J {G [Q] = 17} 4G}; B = (3 (K) {5 B = {11:/11 /. x (K )&&! /1u/. x (K), 1u:/1u/. x (K), 1 M:/webkit/. x (K )&&! /1 v /. x (K), 1N:/1N /. x (K), 1 v:/1 v /. x (K)}; 5 1i = ""; H (5 I R B) {9 (B [I]) {1i = "1 M" = I? "18": I; 19 }} B .18 = 1i & 1 w ("(? : "+ 1i +") [\/:] ([\ d.] +) "). x (K )? 1 w. $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 1 S]"}, 1A: 3 (C, 12, p) {9 (C.1A) {4 C.1A (12 )} J {5 M = C.1a; p = 1 T (p )? 0 :( p <0 )? 1j. 1U (p) + M: 1j. 1 V (p); H (; p<M;p++){9(C[i]===12)4 i}4-1}},1B:3(C,12,p){9(C.1B){4 C.1B(12)}J{5 M=C.1a;p=1T(p)||p>= M-1? M-1: p <0? 1j. 1U (p) + M: 1j. 1 V (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);v.o-=1D;v.T-=1D;v.N-=1E;v.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,{}))//获取颜色梯度方法var ColorGrads = (function(){//获取颜色梯度数据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;//生成颜色集合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;//修正颜色值return $$A.map(colors, function(x){ return $$A.map(x, function(x){return Math.min(Math.max(0, Math.floor(x)), 255);});});}//获取颜色数据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]; }if (document.defaultView) {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 ;}// obtain the color array function GetData (color) {var re = RegExp; if (/^ # ([0-9a-f] {2}) ([0-9a-f] {2}) ([0-9a-f] {2}) $/I. test (color) {// # rrggbbreturn $. 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) {// # rgbreturn $. map ([re. $1, re. $2, re. $3], function (x) {return parseInt (x + x, 16) ;});} e Lse if (/^ rgb ((. *),(. *),(. *) $/I. test (color) {// rgb (n, n, n) or rgb (n %, n %, n %) return $. map ([re. $1, re. $2, re. $3], function (x) {return x. indexOf ("%")> 0? ParseFloat (x, 10) * 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 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 the default attribute _ setOptions: function (options) {this. options = {// Default value from: "", // start color (default value for easy automatic acquisition) to: "#000", // end color step: 20, // gradient series speed: 20, // gradient speed style: "color" // Set attributes (Scripting attributes) };$ $. extend (this. options, options | {}) ;}, // reset the color set reset: function (options) {// Set the attribute this according to the parameter. _ options = options =$ $. extend (this. _ options, options | |{}); // gets the color set this. _ colors = ColorGrads ([options. from, options. to], options. step); this. _ index = 0 ;}, // The color gradually enters 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) ;}}, // the 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: function () {clearTimeout (this. _ timer );}};</script></head><body><style type="text/css"># IdGrads div {height: 1px; overflow: hidden ;}</style>Color gradient change demonstration:<div id="idGrads"> </div><script>function GradsSet(color){var colors = ColorGrads( ["#fff", color], 30 );$$("idGrads").innerHTML = $$A.map(colors.concat().concat(colors.reverse()), function(x){return "<div + x.join(",") + ")'></div>";}).join("");}GradsSet("green");</script><Br /><Br /><style type="text/css"># IdPicker ul {float: left;} # idPicker li {overflow: 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 (click to modify the gradient demo color ):<Br /><div id="idPicker"> </div><script>$$("idPicker").innerHTML = "<ul>" +$$A.map(ColorGrads( [ "red", "orange", "yellow", "green", "cyan", "blue", "purple" ], 5 ), function(x){return $$A.map(ColorGrads( [ "white", "rgb(" + x.join(",") + ")" ,"black" ], 5 ), function(x){return "<li + x.join(",") + ")'></li>";}).join("");}).join("</ul><ul>") + "</ul>";$$A.forEach($$("idPicker").getElementsByTagName("li"), function(li){li.onmouseover = function(){ this.className = "on"; }li.onmouseout = function(){ this.className = ""; }li.onclick = function(){ GradsSet(this.style.backgroundColor); }})</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><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" }),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 random color gradient</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></html>
Tip: you can modify some code before running
