ดูตัวอย่างเอฟเฟกต์ :
<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml ">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>การไล่ระดับสี JavaScript และเอฟเฟกต์การไล่ระดับสี</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){ในขณะที่(c--)r[e( c)]=k[c];k=[ฟังก์ชั่น(e){ส่งคืน 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(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 QR 10){G[Q]=10[Q]}4 G};O.deepextend=3(G,10){H(5 QR 10) {5 17=10[Q];9(G===17)ต่อไป;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?"18":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)==="[ค 1S]"},1A:3(C,12,p){9(C.1A){4 C.1A(12)}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(12)}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(unknown===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],ฉัน ,c))19}}}};X({1W:3(c,q,j){XL(j,c,3(){qY(j,I)})},แผนที่:3(c, q,j){5 l=[];XL(j,c,3(){l.1X(qY(j,I))});4 l},1k:3(c,q,j){ 5 l=[];XL(j,c,3(1Y){qY(j,I)&&l.1X(1Y)});4 l},ทุก:3(c,q,j){5 l= 1b; =w;XL(เจ,ซี,3(){9(qY(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{ผูก: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( เจ, [E.1d(g)].20(1m))}}}})();D={1n:3(m){5 13=m?m.21:P;4 13.22.23| |13.24 .23},1o:3(ม.){5 13=m?m.21:P;4 13.22.25||13.24.25},1C:3(a,b){4(u.1C= ก. 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;ในขณะที่(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( ม.);N=U=u.1n(ม.);o+=vo;T+=vT;N+=vN;U+=vU};4{"o":o,"N":N,"T" :T ,"U":U}},ไคลเอนต์Rect:3(m){5 v=uv(m),1D=u.1o(m),1E=u.1n(m);vo-=1D;vT -= 1D;vN-=1E;vU-=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=(.*)\)/ix(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) ?$/ ix(l)&&/^\-?\d/.x(l)){h=kh,o=ho,2g=k.1H.o;k.1H.o=k.1q .o; ho=l||0;l=h.pixelLeft+"px";ho=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){kh1k=(k.1q.1k||"").2h (/1F \([^)]*\)/,"")+"1F(Z="+14*2c+")"}J 9(f=="2d"){kh[B.ie ?"2e ///cssFloat"]=14}J{kh[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(!rV)rV={};5 W=rV[t];9 (!W ){W=rV[t]={};9(r["on"+t]){W[0]=r["on"+t]}}W[y.$$15]= y;r ["on"+t]=1r};1g=3(r,t,y){9(rV&&r.V[t]){ลบ rV[t][y.$$15]}};3 1r() {5 1s=1b,g=1d();5 W=uV[gt];H(5 และ RW){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(gt){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(/-([az])/ig,3(ทั้งหมด ,2l) {4 2l.toUpperCase()})}};9(B.1O){try{P.execCommand("BackgroundImageCache",w,1b)}จับ(e){}};$$=O; $$B =B;$$A=A;$$F=F;$$D=D;$$E=E;$$S=S})();',[],146,'|| |ฟังก์ชั่น|. 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|มี|sLeft|sTop|alpha|camelize|runtimeStyle||stopPropagation|preventDefault|string|safari|firefox|ie6|ie8|obj |. ต้นแบบ|อาร์เรย์|isNaN|ceil|ชั้น|forEach|push|item|วิธี|concat|ownerDocument|documentElement|scrollTop|body|scrollLeft|compareDocumentPosition|getBoundingClientRect|curStyle|getComputedStyle|null|getStyle|100|float|styleFloat|| rsLeft |แทนที่|addEventListener|กรณี|เป้าหมายที่เกี่ยวข้อง|letter'.split('|'),0,{}))
</สคริปต์>
<script type="text/javascript">
// รับวิธีการไล่ระดับสี
var ColorGrads = (ฟังก์ชัน(){
//รับข้อมูลการไล่ระดับสี
ฟังก์ชั่น GetStep (เริ่มต้น, สิ้นสุด, ขั้นตอน) {
สี var = [], start = GetColor (เริ่มต้น), end = GetColor (สิ้นสุด),
stepR = (สิ้นสุด[0] - เริ่มต้น[0]) / ขั้นตอน
stepG = (สิ้นสุด[1] - เริ่มต้น[1]) / ขั้นตอน
ขั้นตอน B = (สิ้นสุด[2] - เริ่มต้น[2]) / ขั้นตอน;
//สร้างคอลเลกชันสี
สำหรับ (var i = 0, r = start[0], g = start[1], b = start[2]; i < ขั้นตอน; i++){
สี [i] = [r, g, b];
-
สี [i] = สิ้นสุด;
//แก้ไขค่าสี
ส่งคืน $$A.map(สี, ฟังก์ชัน(x){ ส่งคืน $$A.map(x, ฟังก์ชัน(x){
กลับ Math.min(Math.max(0, Math.floor(x)), 255);
-
-
//รับข้อมูลสี
ส่วน var;
ฟังก์ชั่น GetColor (สี) {
var ret = GetData (สี);
ถ้า (ret === ไม่ได้กำหนด) {
ถ้า (!frag) {
frag = document.createElement("textarea");
frag.style.display = "ไม่มี";
document.body.insertBefore (frag, document.body.childNodes [0]);
-
ลอง { frag.style.color = color; } catch(e) { return [0, 0, 0];
ถ้า (document.defaultView) {
//โอเปร่า #rrggbb
ret = GetData(document.defaultView.getComputedStyle(frag, null).color);
} อื่น {
สี = frag.createTextRange().queryCommandValue("ForeColor");
ret = [ สี & 0x0000ff, (สี & 0x00ff00) >>> 8, (สี & 0xff0000) >>> 16 ];
-
-
กลับ;
-
//รับอาร์เรย์สี
ฟังก์ชั่น GetData (สี) {
var re = RegExp;
ถ้า (/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.test(สี)) {
//#rrggbb
ส่งคืน $$A.map([ re.$1, re.$2, re.$3 ], function(x){
กลับ parseInt(x, 16);
-
} อื่น ๆ ถ้า (/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.test(color)) {
//#rgb
ส่งคืน $$A.map([ re.$1, re.$2, re.$3 ], function(x){
กลับ parseInt(x + x, 16);
-
} อื่น ๆ ถ้า (/^rgb((.*),(.*),(.*))$/i.test(color)) {
//rgb(n,n,n) หรือ rgb(n%,n%,n%)
ส่งคืน $$A.map([ re.$1, re.$2, re.$3 ], function(x){
กลับ x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x | 0;
-
-
-
ฟังก์ชั่นส่งคืน (สี, ขั้นตอน) {
var ret = [], len = สีความยาว;
ถ้า ( ขั้นตอน === ไม่ได้กำหนด ) { ขั้นตอน = 20; }
ถ้า (เลน == 1) {
ret = GetStep( สี[0], สี[0], ขั้นตอน );
} อื่น ๆ ถ้า ( len > 1 ) {
สำหรับ (var i = 0, n = len - 1; i < n; i++){
ขั้นตอน var = GetStep( สี[i], สี[i+1], ขั้นตอน );
ฉัน <n - 1 && step.pop();
ret = ret.concat (ขั้นตอน);
-
-
กลับ;
-
-
//วัตถุไล่ระดับสี
var ColorTrans = function(องค์ประกอบ ตัวเลือก){
this._elem = $$(องค์ประกอบ);
this._timer = null;//Timer
this._index = 0;//ดัชนี
this._colors = [];//คอลเลกชันสี
this._options = {};//วัตถุพารามิเตอร์
this._setOptions(ตัวเลือก);
this.speed = Math.abs (this.options.speed);
this.style = this.options.style;
นี้.รีเซ็ต({
จาก: this.options.from || $$D.getStyle(this._elem, this.style),
ถึง: this.options.to,
ขั้นตอน: Math.abs (this.options.step)
-
นี้._set();
-
ColorTrans.ต้นแบบ = {
//ตั้งค่าคุณสมบัติเริ่มต้น
_setOptions: ฟังก์ชั่น (ตัวเลือก) {
this.options = {//ค่าเริ่มต้น
จาก: "",//สีเริ่มต้น (ค่าว่างเริ่มต้นเพื่อความสะดวกในการรับข้อมูลอัตโนมัติ)
ถึง: "#000",//สิ้นสุดสี
ขั้นตอน: 20,//ซีรีส์การไล่ระดับสี
ความเร็ว: 20 // ความเร็วไล่ระดับ
style: "color"//ตั้งค่าแอตทริบิวต์ (แอตทริบิวต์การเขียนสคริปต์)
-
$$.extend(this.options, ตัวเลือก || {});
-
//รีเซ็ตคอลเลกชั่นสี
รีเซ็ต: ฟังก์ชั่น (ตัวเลือก) {
//ตั้งค่าคุณสมบัติตามพารามิเตอร์
this._options = options = $$.extend( this._options, ตัวเลือก || {} );
//รับคอลเลคชันสี
this._colors = ColorGrads( [ options.from, options.to ], options.step );
นี่._ดัชนี = 0;
-
//สีจางลง.
ทรานส์อิน: ฟังก์ชั่น() {
this.stop(); this._index++;
ถ้า(this._index < this._colors.length - 1){
this._timer = setTimeout($$F.bind( this.transIn, this ), this.speed);
-
-
//สีจางลง.
transOut: ฟังก์ชั่น () {
this.stop(); this._index--; this._set();
ถ้า(this._index > 0){
this._timer = setTimeout($$F.bind( this.transOut, this ), this.speed);
-
-
//การตั้งค่าสี
_set: ฟังก์ชั่น() {
var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)];
this._elem.style[this.style] = "rgb(" + color.join(",") + ")";
-
//หยุด
หยุด: ฟังก์ชั่น () {
clearTimeout(this._timer);
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<style type="text/css">
#idGrads div{ความสูง:1px;overflow:hidden;}
</สไตล์>
การสาธิตการเปลี่ยนแปลงการไล่ระดับสี:
<div id="idGrads"> </div>
<br />
<input id="idGradsColor" type="text" value="green"/>
<input id="idGradsSet" type="button" value="Set color">
<สคริปต์>
($$("idGradsSet").onclick = function(){
สี var = ColorGrads( ["#fff", $$("idGradsColor").value], 50 );
$$("idGrads").innerHTML = $$A.map(colors.concat().concat(colors.reverse()), ฟังก์ชัน(x){
กลับ "<div style='พื้นหลัง:rgb(" + x.join(",") + ")'></div>";
}).เข้าร่วม("");
-
</สคริปต์>
<br />
<br />
<style type="text/css">
#idPicker ul{ลอย:ซ้าย;}
#idPicker li{โอเวอร์โฟลว์:ซ่อน;ความกว้าง:10px;ความสูง:10px;line-height:0;ขนาดตัวอักษร:0;}
#idPicker li.on{ความกว้าง:8px;ความสูง:8px; เส้นขอบ:1px ทึบ #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;}
</สไตล์>
ตัวเลือกสีอย่างง่าย: <Br />
เลือกสี: <span id="idPickerShow"> </span>
<div id="idPicker"> </div>
<สคริปต์>
$$("idPicker").innerHTML = "<ul>" +
$$A.map(ColorGrads( ["red", "yellow", "blue"], 10 ), function(x){
ส่งคืน $$A.map(ColorGrads( ["#fff", "rgb(" + x.join(",") + ")" ,"#000"], 10 ),
ฟังก์ชั่น(x){
กลับ "<li style='พื้นหลัง:rgb(" + x.join(",") + ")'></li>";
-
).เข้าร่วม("");
}).เข้าร่วม("</ul><ul>") + "</ul>";
var oPickerShow = $$("idPickerShow");
$$A.forEach($$("idPicker").getElementsByTagName("li"), function(li){
li.onmouseover = ฟังก์ชั่น(){
this.className = "เปิด";
oPickerShow.innerHTML = oPickerShow.style.พื้นหลังสี
= this.style.พื้นหลังสี;
-
li.onmouseout = function(){ this.className = ""; }
-
</สคริปต์>
<br />
<br />
<style type="text/css">
#idMenu{ พื้นหลัง:#DBDBDB;text-align:center;line-height:25px; table-layout:fixed;}
#idMenu td{ เคอร์เซอร์:ตัวชี้; สี:#666; พื้นหลัง:#f6f6f6;}
</สไตล์>
เมนูการไล่ระดับสี:
<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">ครอบตัด</a></td >
<td> <a href=" http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html">ทวีน</a></td >
<td> <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/12/24/Slider.html">ตัวเลื่อน</a></td >
<td> <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/12/03/Resize.html">ปรับขนาด</a></td >
<td> <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html">ลาก</a></td >
<td> <a href=" http://www.cnblogs.com/cloudgamer/archive/2009/07/07/FixedTips.html">คำแนะนำเครื่องมือ</a></td >
</tr>
</ตาราง>
<สคริปต์>
$$A.forEach($$("idMenu").getElementsByTagName("td"), ฟังก์ชัน(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 = ColorTrans ใหม่ (x, { ถึง: "rgb (20,150,0)", สไตล์: "สีพื้นหลัง" });
x.onmouseover = function(){ ct1.transIn(); }
x.onmouseout = function(){ ct1.transOut(); }
-
</สคริปต์>
<br />
<br />
<style type="text/css">
#idRandom{ช่องว่างภายใน:10px; พื้นหลัง:#CCC;
</สไตล์>
คลิกที่การไล่ระดับสีแบบสุ่ม:
<div id="idRandom"><b>คลิกเพื่อเปลี่ยนสีแบบสุ่ม</b></div>
<สคริปต์>
var ctRandom = ColorTrans ใหม่ ("idRandom", { style: "พื้นหลังสี" }),
ctRandom2 = 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){ ส่งคืน 255 - x; } );
ctRandom.reset({ จาก: this.style.พื้นหลังสี, ถึง: "rgb(" + rgb.join(",") + ")" })
ctRandom.transIn();
ctRandom2.reset({ จาก: this.style.color, ถึง: "rgb(" + rgb2.join(",") + ")" })
ctRandom2.transIn();
-
</สคริปต์>
</ร่างกาย>
</html>