reflex.js

一个在图像显示的时候具有镜面反射效果的javascript

				q = 100-(((iter*z)/(ih/100))/2); 
				if(bord>0||iborder>0) {
					fb = '<v:shape strokeweight="'+iborder+'" strokecolor="'+colr+'" filled="f" stroked="'+(bord>0||iborder>0?'t':'f')+'" coordorigin="0,0" coordsize="'+iw+','+ih+'" path="m '+(ww+bord)+','+(hh+bord)+' l '+(ww+bord)+','+(ih-hh-bord)+','+(iw-ww-bord)+','+(ih-bord)+','+(iw-ww-bord)+','+bord+' x e" style="position:absolute; margin:-1px 0 0 -1px; padding:0; top:0px; left:0px; width:' + iw + 'px;height:' + ih + 'px;"></v:shape>';
					xb = '<v:shape strokeweight="'+iborder+'" strokecolor="'+colr+'" stroked="'+(bord>0||iborder>0?'t':'f')+'" filled="f" coordorigin="0,0" coordsize="'+iw+','+(hh+higt+dist)+'" path="m '+(ww+bord)+','+(parseInt(dist*z)+bord)+' l '+(ww+bord)+','+(parseInt((higt+dist)*z)-bord)+','+(iw-ww-bord)+','+(higt+hh+dist-bord)+','+(iw-ww-bord)+','+(hh+dist+bord)+' x e" style="position:absolute; margin:-1px 0 0 -1px; padding:0; top:'+(ih-hh+dist)+'px; left:0px; width:' + iw + 'px;height:' + (hh+higt+dist) + 'px; flip: y; filter:flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+opac+',style=1,finishOpacity=0,startx=100,starty=0,finishx='+q+',finishy=80);"></v:shape>';
				}else {fb = ''; xb = ''; }
				flex = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+iw+','+(hh+higt+dist)+'" path="m '+ww+','+parseInt(dist*z)+' l '+ww+','+parseInt((higt+dist)*z)+','+(iw-ww)+','+(higt+hh+dist)+','+(iw-ww)+','+(hh+dist)+' x e" style="position:absolute; margin:-1px 0 0 -1px; padding:0; top:'+(ih-hh+dist)+'px; left:0px; width:' + iw + 'px;height:' + (hh+higt+dist) + 'px; flip: y; filter:flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+opac+',style=1,finishOpacity=0,startx=100,starty=0,finishx='+q+',finishy=90);"><v:fill origin="0,0" position="0,-'+((divs/2)-0.5)+'" size="1,'+(divs)+'" src="' + image.src + '" type="frame" /></v:shape>';
			}
			foot = '</v:group>';
			vml.innerHTML = head+flex+xb+fill+fb+foot;
			vml.className = newClasses;
			vml.style.cssText = image.style.cssText;
			vml.style.height = ih+higt+dist+'px'; vml.width = iw;
			vml.height = ih+higt+dist; vml.style.width = iw+'px';
			vml.src = image.src; vml.alt = image.alt;
			if(image.id!='') vml.id = image.id; 
			if(image.title!='') vml.title = image.title;
			if(image.getAttribute('onclick')!='') vml.setAttribute('onclick',image.getAttribute('onclick'));
			object.replaceChild(vml,image);
			if(tilt=='r') {tilt='n';}else if(tilt=='n') {tilt='l';}else if(tilt=='l') {tilt='r';}
			vml.style.visibility = 'visible';
		}
	}
}

function addReflex() {
	var theimages = getImages('reflex');
	var image, object, canvas, context, classes, newClasses, tmp;  
	var i, j, dist, stl, iter, rest, radi, higt, divs, opac, colr, bord, wide, ih, iw;  
	var itiltright, itiltnone, itiltleft, iheight, iopacity, idistance, iborder, icolor, iradius;
	var children = document.getElementsByTagName('img'); var tilt = 'r';
	var isWK = (navigator.appVersion.indexOf('WebKit')!=-1?1:0); var isOP = (window.opera?1:0);
	for(i=0;i<theimages.length;i++) {	
		image = theimages[i]; object = image.parentNode; tmp = 0;
		itiltright = 0; itiltnone = 0; itiltleft = 0; 
		iheight = 33; iopacity = 33; idistance = 0;
		iborder = 0; icolor = '#000000'; iradius = 0; 
		canvas = document.createElement('canvas');
		if(canvas.getContext && image.width>=32 && image.height>=32) {
			classes = image.className.split(' ');
			iradius = getClassValue(classes,"iradius");
			iborder = getClassValue(classes,"iborder");
			iheight = getClassValue(classes,"iheight");
			iopacity = getClassValue(classes,"iopacity");
			idistance = getClassValue(classes,"idistance");
			icolor = getClassColor(classes,"icolor");
			itiltleft = getClassAttribute(classes,"itiltleft");
			itiltright = getClassAttribute(classes,"itiltright");
			itiltnone = getClassAttribute(classes,"itiltnone");
			if(itiltright==true) tilt = 'r';
			if(itiltnone==true) tilt = 'n';
			if(itiltleft==true) tilt = 'l';
			newClasses = getClasses(classes,"reflex");	
			ih = image.height; iw = image.width; dist = idistance; 
			radi = Math.min(iradius,Math.max(iw,ih)/10);
			colr = (icolor!=0?icolor:'#000000');
			opac = (100-(iopacity>0?iopacity:33))/100;
			divs = 100/(iheight>=10?iheight:33);
			higt = Math.floor(image.height/divs);
			iborder = Math.round(Math.min(Math.min(iborder,higt/4),Math.max(iw,ih)/20));
			wide = 12; bord = (iborder>0?iborder/2:0);
			canvas.className = newClasses;
			canvas.style.cssText = image.style.cssText;
			canvas.style.height = ih+higt+dist+'px'; canvas.width = iw;
			canvas.style.width = iw+'px'; canvas.height = ih+higt+dist;
			canvas.src = image.src; canvas.alt = image.alt;
			if(image.id!='') canvas.id = image.id;
			if(image.title!='') canvas.title = image.title;
			if(image.getAttribute('onclick')!='') canvas.setAttribute('onclick',image.getAttribute('onclick'));
			iter = Math.floor(canvas.width/wide); rest = (canvas.width%wide);
			if(tilt=='l'||tilt=='r') {
				resource = document.createElement('canvas');
				if(resource.getContext) {
					resource.style.position = 'fixed';
					resource.style.left = -9999+'px';
					resource.style.top = 0+'px';
					resource.height = canvas.height;
					resource.width = canvas.width;
					resource.style.height = canvas.height+'px';
					resource.style.width = canvas.width+'px';
					if(isWK) {
						object.appendChild(resource);
					}
				}
			}
			context = canvas.getContext("2d");
			object.replaceChild(canvas,image);
			context.clearRect(0,0,canvas.width,canvas.height);
			context.globalCompositeOperation = "source-over";
			context.fillStyle = 'rgba(0,0,0,0)';
			context.fillRect(0,0,canvas.width,canvas.height);
			context.save();
			context.translate(0,canvas.height-(isWK?0:1));
			context.scale(1,-1);
			context.drawImage(image,0,-(canvas.height-higt-higt-dist),canvas.width,canvas.height-higt-dist);
			context.restore();
			if(iborder>0) {
				context.strokeStyle = colr;
				context.lineWidth = iborder;
				context.beginPath(); 
				tmp = 0; if(isOP&&tilt!='n') tmp = 1; if(isOP&&tilt=='n') tmp = -1;
				context.rect(bord,canvas.height-higt+bord+tmp,canvas.width-iborder,higt);
				context.closePath();
				context.stroke();
			}
			if(!isWK||tilt=='n') {
				tmp = 0; if(isOP) tmp = 1;
				context.globalCompositeOperation = "destination-out";
				stl = context.createLinearGradient(0,canvas.height-higt-tmp,0,canvas.height);
				stl.addColorStop(1,"rgba(0,0,0,1.0)");
				stl.addColorStop(0,"rgba(0,0,0,"+opac+")");
				context.fillStyle = stl;
			}
			if(isWK) {
				context.beginPath(); 
				context.rect(0,canvas.height-higt,canvas.width,higt);
				context.closePath();
				context.fill();
			}else {
				tmp = 0; if(isOP&&tilt=='n') tmp = 1;
				context.fillRect(0,canvas.height-higt-tmp,canvas.width,higt+tmp);
			}
			context.globalCompositeOperation = "source-over";
			context.drawImage(image,0,0,iw,ih);
			context.save();
			if(isWK&&dist>0&&tilt!='n') {
				context.fillStyle = '#808080';
				context.fillRect(0,canvas.height-higt-dist,canvas.width,dist);
			}
			if(iborder>0) {
				if(tilt=='n') {
					context.beginPath(); 
					context.rect(bord,bord,canvas.width-iborder,canvas.height-higt-dist-iborder);
					context.closePath();
					context.stroke();
				}
			}
			if(tilt=='l'||tilt=='r') {
				if(resource.getContext) {
					context = resource.getContext("2d");
					globalCompositeOperation = "source-over";
					context.clearRect(0,0,resource.width,resource.height);					
					if(tilt=='r') {
						for(j=0;j<iter;j++) {
							context.drawImage(canvas,j*wide,0,wide,resource.height,j*wide,j*1,wide,resource.height-(j*2));
						}
						if(rest>0) {
							rest = canvas.width-(iter*wide);
							context.drawImage(canvas,j*wide,0,rest,resource.height,j*wide,j*1,rest,resource.height-(j*2));
						}
					}else {
						for(j=0;j<iter;j++) {
							context.drawImage(canvas,j*wide,0,wide,resource.height,j*wide,(iter-j)*1,wide,resource.height-((iter-j)*2));
						}
						if(rest>0) {
							rest = canvas.width-(iter*wide);
							context.drawImage(canvas,j*wide,0,rest,resource.height,j*wide,0,rest,resource.height);
						}
					}
					context.save();
					if(canvas.getContext) {
						context = canvas.getContext("2d");
						context.clearRect(0,0,canvas.width,canvas.height);						
						globalCompositeOperation = "source-in";
						if(tilt=='r') {
							clipPolyRight(context,canvas.width/20,0,canvas.width*0.95,canvas.height,iter+(rest>0?1:0),dist,higt);
						}else {
							clipPolyLeft(context,canvas.width/20,0,canvas.width*0.95,canvas.height,iter+(rest>0?1:0),dist,higt);
						}
						context.clip();
						context.drawImage(resource,parseInt(canvas.width/20),0,parseInt(canvas.width*0.9),canvas.height);
						context.save();
						if(iborder>0) {
							context.lineWidth = iborder;
							if(tilt=='r') {
								strokePolyRight(context,canvas.width/20,0,canvas.width*0.95,canvas.height,iter+(rest>0?1:0),dist,higt,bord);
								context.stroke();
							}else {
								strokePolyLeft(context,canvas.width/20,0,canvas.width*0.95,canvas.height,iter+(rest>0?1:0),dist,higt,bord);
								context.stroke();
							}
						}
						if(isWK) {
							context.globalCompositeOperation = "destination-out";
							stl = context.createLinearGradient((tilt=='l'?canvas.width:0),canvas.height-higt,(tilt=='l'?canvas.width-parseInt(wide/divs):parseInt(wide/divs)),canvas.height);
							stl.addColorStop(1,"rgba(255,0,0,1.0)");
							stl.addColorStop(0,"rgba(255,0,0,"+opac+")");
							context.fillStyle = stl;
							clipReflex(context,canvas.width/20,0,canvas.width*0.95,canvas.height,iter+(rest>0?1:0),dist,higt,tilt);
							context.fill();
							globalCompositeOperation = "source-in";
							clearReflex(context,canvas.width/20,0,canvas.width*0.95,canvas.height,iter+(rest>0?1:0),dist,higt,tilt);
							context.clip();
							context.clearRect(0,0,canvas.width,canvas.height);
							context.clearRect(0,0,canvas.width,canvas.height);
							context.clearRect(0,0,canvas.width,canvas.height);
							context.clearRect(0,0,canvas.width,canvas.height);
							object.removeChild(resource);
						}
					}
				}
			}
			if(tilt=='r') {tilt='n';}else if(tilt=='n') {tilt='l';}else if(tilt=='l') {tilt='r';}
			context.save();
			canvas.style.visibility = 'visible';
		}
	}
}

var reflexOnload = window.onload;
window.onload = function () { if(reflexOnload) reflexOnload(); if(isIE){addIEReflex(); }else {addReflex(); }}