bevel.js

用javascript实现图片右下角翻页效果。很强大。

		high = ''; shine = ''; left = ''; right = ''; shade = ''; glow = ''; oline = '';
		classes = image.className.split(' ');
		iglowcol = getClassHexColor(classes,"iglowcol",'000000');
		ibackcol = getClassHexColor(classes,"ibackcol",'0080ff');
		ifillcol = getClassHexColor(classes,"ifillcol",'000000');
		if(ifillcol=='000000') {ifillcol = ibackcol; }
		ishinecol = getClassHexColor(classes,"ishinecol",'ffffff');
		ishadecol = getClassHexColor(classes,"ishadecol",'000000');
		iradius = getClassValue(classes,"iradius");
		iglowopac = getClassValue(classes,"iglowopac");
		ishineopac = getClassValue(classes,"ishineopac");
		ishadeopac  = getClassValue(classes,"ishadeopac");
		islinear = getClassAttribute(classes,"islinear");
		usemask = getClassAttribute(classes,"usemask");
		noglow = getClassAttribute(classes,"noglow");
		noshine = getClassAttribute(classes,"noshine");
		noshade = getClassAttribute(classes,"noshade");
		iradius = iradius==0?20:iradius;
		iglowopac = Math.min(iglowopac==0?40:iglowopac*1.2,100);
		ishineopac = ishineopac==0?0.4:ishineopac/100;
		ishadeopac = ishadeopac==0?0.5:ishadeopac/100;
		newClasses = getClasses(classes,"bevel");
		ww = image.width; hh = image.height;
		mask = usemask>=1?"filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=50,style=3);":"";
		if(noglow<1) {
			radius = Math.max(Math.min(iradius,40),20);
			ix = Math.round(Math.min(ww,hh)*0.05); 
			iy = ix; iw = ww-(2*ix); ih = hh-(2*iy);
			ro = Math.round(Math.min(iw,ih)*(radius/100));	
			ri = Math.round(ro*0.8); r = ri/2;
			inner = getRadius(ri/2,iw-ri,ih-ri); 
			radius = radius*0.8; ro = Math.round(ro*0.8);
		}else {
			radius = Math.max(Math.min(iradius,40),20);
			ix = 0; iy = 0; iw = ww; ih = hh;
			ri = Math.round(Math.min(iw,ih)*(radius/100));
			r = ri/2; inner = getRadius(ri/2,iw-ri,ih-ri);
			ro = ri;
		} t = Math.round(Math.max(Math.round(iw/200),1)); f = 0;
		if(noglow<1) {glow = '<v:roundrect arcsize="'+radius+'%" strokeweight="0" filled="t" stroked="f" fillcolor="#'+iglowcol+'" style="filter:Alpha(opacity='+iglowopac+'), progid:dxImageTransform.Microsoft.Blur(PixelRadius='+(ix/2)+',MakeShadow=false); zoom:1;margin:-1px 0 0 -1px;padding:0;position:absolute;top:0px;left:0px;width:'+(iw+ix)+'px;height:'+(ih+iy)+'px;"><v:fill color="#'+iglowcol+'" opacity="1" /></v:roundrect>';}
		fill = '<v:roundrect arcsize="'+radius+'%" strokeweight="0" filled="t" stroked="f" fillcolor="#ffffff" style="zoom:1;margin:-1px 0 0 -1px;padding:0;position:absolute;top:'+iy+'px;left:'+ix+'px;width:'+iw+'px;height:'+ih+'px;"><v:fill method="linear" type="gradient" angle="0" color="#'+ifillcol+'" color2="#'+ibackcol+'" /></v:roundrect>';
		fill += '<v:roundrect arcsize="'+radius+'%" strokeweight="0" filled="t" stroked="f" style="'+mask+'zoom:1;margin:-1px 0 0 -1px;padding:0;position:absolute;top:'+iy+'px;left:'+ix+'px;width:'+iw+'px;height:'+ih+'px;"><v:fill src="'+image.src+'" type="frame" /></v:roundrect>';
		if(noshade<1) {
			shade = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+ro+','+ro+'" path="m '+ro+','+ro+' l 0,'+ro+' qy '+ro+',0 l '+ro+','+ro+' x e" style="position:absolute;margin: -1px 0 0 -1px;top:'+iy+'px;left:'+ix+'px;width:'+ro+'px;height:'+ro+'px;"><v:fill method="'+(islinear>0?"linear":"sigma")+'" type="gradientradial" focus="1" focusposition="1,1" focussize="0.5,0.5" color="#'+ishadecol+'" opacity="0" color2="#'+ishadecol+'" o:opacity2="'+ishadeopac+'" /></v:shape>'; 
			shade += '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+ro+','+ro+'" path="m 0,'+ro+' l '+ro+','+ro+' qy 0,0 l 0,'+ro+' x e" style="position:absolute;margin: -1px 0 0 -1px;top:'+iy+'px;left:'+(ix+iw-ro)+'px;width:'+ro+'px;height:'+ro+'px;"><v:fill method="'+(islinear>0?"linear":"sigma")+'" type="gradientradial" focus="1" focusposition="-0.5,1" focussize="0.5,0.5" color="#'+ishadecol+'" opacity="0" color2="#'+ishadecol+'" o:opacity2="'+ishadeopac+'" /></v:shape>'; 
			shade += '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+ro+','+ro+'" path="m '+ro+',0 l '+ro+','+ro+' qx 0,0 l '+ro+',0 x e" style="position:absolute;margin: -1px 0 0 -1px;top:'+(iy+ih-ro)+'px;left:'+ix+'px;width:'+ro+'px;height:'+ro+'px;"><v:fill method="'+(islinear>0?"linear":"sigma")+'" type="gradientradial" focus="1" focusposition="1,-0.5" focussize="0.5,0.5" color="#'+ishadecol+'" opacity="0" color2="#'+ishadecol+'" o:opacity2="'+ishadeopac+'" /></v:shape>'; 
			shade += '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+ro+','+ro+'" path="m 0,0 l '+ro+',0 qy 0,'+ro+' l 0,0 x e" style="position:absolute;margin: -1px 0 0 -1px;top:'+(iy+ih-ro)+'px;left:'+(ix+iw-ro)+'px;width:'+ro+'px;height:'+ro+'px;"><v:fill method="'+(islinear>0?"linear":"sigma")+'" type="gradientradial" focus="1" focusposition="-0.5,-0.5" focussize="0.5,0.5" color="#'+ishadecol+'" opacity="0" color2="#'+ishadecol+'" o:opacity2="'+ishadeopac+'" /></v:shape>'; 
			shade += '<v:rect strokeweight="0" filled="t" stroked="f" fillcolor="#000000" style="position:absolute;margin: -1px 0 0 -1px;top:'+iy+'px;left:'+(ix+ro-f)+'px;width:'+(iw-ro-ro+f+f)+'px;height:'+ro+'px;"><v:fill method="'+(islinear>0?"linear":"sigma")+'" type="gradient" angle="0" color="#'+ishadecol+'" opacity="0" color2="#'+ishadecol+'" o:opacity2="'+ishadeopac+'" /></v:rect>';	
			shade += '<v:rect strokeweight="0" filled="t" stroked="f" fillcolor="#000000" style="position:absolute;margin: -1px 0 0 -1px;top:'+(iy+ro-f)+'px;left:'+ix+'px;width:'+ro+'px;height:'+(ih-ro-ro+f+f)+'px;"><v:fill method="'+(islinear>0?"linear":"sigma")+'" type="gradient" angle="90" color="#'+ishadecol+'" opacity="0" color2="#'+ishadecol+'" o:opacity2="'+ishadeopac+'" /></v:rect>';	
			shade += '<v:rect strokeweight="0" filled="t" stroked="f" fillcolor="#000000" style="position:absolute;margin: -1px 0 0 -1px;top:'+(iy+ro-f)+'px;left:'+(ix+iw-ro)+'px;width:'+ro+'px;height:'+(ih-ro-ro+f+f)+'px;"><v:fill method="'+(islinear>0?"linear":"sigma")+'" type="gradient" angle="270" color="#'+ishadecol+'" opacity="0" color2="#'+ishadecol+'" o:opacity2="'+ishadeopac+'" /></v:rect>';	
			shade += '<v:rect strokeweight="0" filled="t" stroked="f" fillcolor="#000000" style="position:absolute;margin: -1px 0 0 -1px;top:'+(iy+ih-ro)+'px;left:'+(ix+ro-f)+'px;width:'+(iw-ro-ro+f+f)+'px;height:'+ro+'px;"><v:fill method="'+(islinear>0?"linear":"sigma")+'" type="gradient" angle="180" color="#'+ishadecol+'" opacity="0" color2="#'+ishadecol+'" o:opacity2="'+ishadeopac+'" /></v:rect>';	
			oline = '<v:roundrect arcsize="'+radius+'%" filled="f" stroked="t" style="zoom:1;margin:-1px 0 0 -1px;padding:0;position:absolute;top:'+iy+'px;left:'+ix+'px;width:'+iw+'px;height:'+ih+'px;"><v:stroke weight="1" style="single" color="#'+ishadecol+'" opacity="'+ishadeopac+'" /></v:roundrect>';
		}
		if(noshine<1) {
			shine = '<v:roundrect arcsize="'+inner+'" strokeweight="0" filled="t" stroked="f" fillcolor="#ffffff" style="zoom:1;margin:-1px 0 0 -1px;padding:0;position:absolute;top:'+(iy+(ri/2))+'px;left:'+(ix+(ri/2))+'px;width:'+(iw-ri)+'px;height:'+(ih-ri)+'px;"><v:fill method="linear sigma" type="gradient" angle="0" color="#'+ishinecol+'" opacity="0" color2="#'+ishinecol+'" o:opacity2="'+ishineopac+'" /></v:roundrect>';
			r=Math.round(r); p = "m 0,"+r+" l 0,"+(ih-ri-r)+","+t+","+(ih-ri-r)+","+t+","+r+" qy "+r+","+t+" l "+(iw-ri-r)+","+t+" qx "+(iw-ri-t)+","+r+" l "+(iw-ri-t)+","+(ih-ri-r)+","+(iw-ri)+","+(ih-ri-r)+","+(iw-ri)+","+r+" qy "+(iw-ri-r)+",0 l "+r+",0 qx 0,"+r+" x e";
			high = '<v:shape strokeweight="0" stroked="f" filled="t" coordorigin="0,0" coordsize="'+(iw-ri)+','+(ih-ri)+'" path="'+p+'" style="zoom:1;margin:-1px 0 0 -1px;padding:0;position:absolute;top:'+(iy+(ri/2))+'px;left:'+(ix+(ri/2))+'px;width:'+(iw-ri)+'px;height:'+(ih-ri)+'px;"><v:fill method="linear sigma" type="gradient" angle="0" color="#'+ishinecol+'" opacity="0" color2="#'+ishinecol+'" o:opacity2="'+ishineopac+'" /></v:shape>';
			left = '<v:oval stroked="f" strokeweight="0" style="zoom:1;margin:-1px 0 0 -1px;padding:0;position:absolute;top:'+(iy+(ri/8))+'px;left:'+(ix+(ri/8))+'px;width:'+ri+'px;height:'+ri+'px;"><v:fill method="any" type="gradientradial" focus="0" focussize="0,0" focusposition="0.5,0.5" on="t" color="#'+ishinecol+'" opacity="0" color2="#'+ishinecol+'" o:opacity2="'+ishineopac+'" /></v:oval>';
			right = '<v:oval stroked="f" strokeweight="0" style="zoom:1;margin:-1px 0 0 -1px;padding:0;position:absolute;top:'+(iy+(ri/8))+'px;left:'+(ix+iw-(ri*1.125))+'px;width:'+ri+'px;height:'+ri+'px;"><v:fill method="any" type="gradientradial" focus="0" focussize="0,0" focusposition="0.5,0.5" on="t" color="#'+ishinecol+'" opacity="0" color2="#'+ishinecol+'" o:opacity2="'+ishineopac+'" /></v:oval>';
		}
		display = (image.currentStyle.display.toLowerCase()=='block')?'block':'inline-block';
		vml = document.createElement(['<var style="zoom:1;overflow:hidden;display:'+display+';width:'+ww+'px;height:'+hh+'px;padding:0;">'].join(''));
		flt = image.currentStyle.styleFloat.toLowerCase();
		display = (flt=='left'||flt=='right')?'inline':display;
		head = '<v:group style="zoom:1;display:'+display+';margin:-1px 0 0 -1px;padding:0;position:relative;width:'+ww+'px;height:'+hh+'px;" coordsize="'+ww+','+hh+'"><v:rect strokeweight="0" filled="t" stroked="f" fillcolor="#ffffff" style="zoom:1;margin:-1px 0 0 -1px;padding:0;position:absolute;top:0px;left:0px;width:'+ww+'px;height:'+hh+'px;"><v:fill color="#ffffff" opacity="0.0" /></v:rect>';
		foot = '</v:group>';
		vml.innerHTML = head+glow+fill+shade+shine+high+left+right+oline+foot;
		vml.className = newClasses;
		vml.style.cssText = image.style.cssText;
		vml.style.height = image.height+'px';
		vml.style.width = image.width+'px';
		vml.height = image.height;
		vml.width = image.width;
		if(image.id!=null) vml.id = image.id;
		if(image.alt!=null) vml.alt = image.alt;
		if(image.title!=null) vml.title = image.title;
		if(image.getAttribute('onclick')!=null) vml.setAttribute('onclick',image.getAttribute('onclick'));
		object.replaceChild(vml,image);
		vml.style.visibility = 'visible';
	}
}

function addBevel() {
	var theimages = getImages('bevel');
	var image, object, canvas, context, classes, newClasses;
	var ww, hh, iw, ih, ix, iy, i, r, radius, inner, outer, style, islinear;
	var iglowcol, ishinecol, ishadecol, ibackcol, ifillcol, usemask, noshine;
	var iglowopac, ishineopac, ishadeopac, iradius, noglow, noshade;
	for (i=0;i<theimages.length;i++) {
		image = theimages[i]; object = image.parentNode;
		canvas = document.createElement('canvas');
		if (canvas.getContext) {
			classes = image.className.split(' ');
			iglowcol = getClassHexColor(classes,"iglowcol",'000000');
			ibackcol = getClassHexColor(classes,"ibackcol",'0080ff');
			ifillcol = getClassHexColor(classes,"ifillcol",'000000');
			if(ifillcol=='0,0,0') {ifillcol = ibackcol; }
			ishinecol = getClassHexColor(classes,"ishinecol",'ffffff');
			ishadecol = getClassHexColor(classes,"ishadecol",'000000');
			iradius = getClassValue(classes,"iradius");
			iglowopac = getClassValue(classes,"iglowopac");
			ishineopac = getClassValue(classes,"ishineopac");
			ishadeopac  = getClassValue(classes,"ishadeopac");
			islinear = getClassAttribute(classes,"islinear");
			usemask = getClassAttribute(classes,"usemask");
			noglow = getClassAttribute(classes,"noglow");
			noshine = getClassAttribute(classes,"noshine");
			noshade = getClassAttribute(classes,"noshade");
			iradius = iradius==0?0.2:iradius/100;
			iglowopac = iglowopac==0?0.33:iglowopac/100;
			ishineopac = ishineopac==0?0.4:ishineopac/100;
			ishadeopac = ishadeopac==0?0.5:ishadeopac/100;
			newClasses = getClasses(classes,"bevel");
			canvas.className = newClasses;
			canvas.style.cssText = image.style.cssText;
			canvas.style.height = image.height+'px';
			canvas.style.width = image.width+'px';
			canvas.height = image.height;
			canvas.width = image.width;
			canvas.src = image.src; 
			if(image.id!=null) canvas.id = image.id;
			if(image.alt!=null) canvas.alt = image.alt;
			if(image.title!=null) canvas.title = image.title;
			if(image.getAttribute('onclick')!=null) canvas.setAttribute('onclick',image.getAttribute('onclick'));
			ww = canvas.width; hh = canvas.height;
			r = Math.max(Math.min(iradius,0.4),0.2);
			ix = Math.round(Math.min(ww,hh)*0.05); 
			iy = ix; iw = ww-(2*ix); ih = hh-(2*iy);
			outer = Math.round(Math.min(iw,ih)*r);
			radius = Math.round(outer*0.8);
			if(noglow>0) {
				ix = 0; iy = 0; iw = ww; ih = hh; 
				radius = Math.round(Math.min(iw,ih)*r);
			} inner = Math.round(radius/2);
			context = canvas.getContext("2d");
			object.replaceChild(canvas,image);
			context.clearRect(0,0,ww,hh);
			context.globalCompositeOperation = "source-over";
			context.save();
			if(noglow<1) {applyGlow(context,0,0,ww,hh,outer,iglowopac,iglowcol);}
			applyForm(context,ix,iy,iw,ih,radius,true,r);
			context.clip();
			style = context.createLinearGradient(ix,iy,ix,iy+ih);
			style.addColorStop(0,'rgba('+ibackcol+',1)');
			style.addColorStop(1,'rgba('+ifillcol+',1)');
			context.fillStyle = style; context.fill();
			context.fillStyle = 'rgba(0,0,0,0)';
			context.fillRect(0,0,ww,hh);
			context.drawImage(image,0,0,ww,hh);
			if(usemask>=1) {
				context.globalCompositeOperation = "destination-out";
				applyMask(context,ix,iy,iw,ih,radius,1,'0,0,0');
				context.globalCompositeOperation = "destination-over";
				context.fillStyle = style;
				context.beginPath(); context.rect(ix,iy,iw,ih);
				context.closePath(); context.fill();
			}
			if(noshade<1) {
				context.globalCompositeOperation = window.opera?"source-over":"source-atop";
				context.fillStyle = 'rgba(0,0,0,0)'; context.fillRect(ix,iy,iw,ih);
				applyMask(context,ix,iy,iw,ih,radius,ishadeopac,ishadecol,false,islinear);
				applyForm(context,ix,iy,iw,ih,radius,true,r);
				context.strokeStyle = 'rgba('+ishadecol+','+ishadeopac+')';
				context.lineWidth = 1; context.stroke();
			}
			if(noshine<1) {
				context.globalCompositeOperation = window.opera?"source-over":"source-atop";
				applyForm(context,ix+inner,iy+inner,iw-radius,ih-radius,inner);
				if(!window.opera) {context.globalCompositeOperation = "lighter"; ishineopac = ishineopac*0.5; }
				style = context.createLinearGradient(0,inner,0,ih-radius);
				style.addColorStop(0,'rgba('+ishinecol+','+ishineopac+')');
				style.addColorStop(0.25,'rgba('+ishinecol+','+(ishineopac/2)+')');
				style.addColorStop(1,'rgba('+ishinecol+',0)');
				context.fillStyle = style; context.fill();
				applyForm(context,ix+inner,iy+inner,iw-radius,ih-radius,inner);
				style = context.createLinearGradient(0,inner,0,ih-radius);
				style.addColorStop(0,'rgba('+ishinecol+','+(ishineopac*1.25)+')');
				style.addColorStop(0.25,'rgba('+ishinecol+','+(ishineopac/1.5)+')');
				style.addColorStop(1,'rgba('+ishinecol+',0)');
				context.strokeStyle = style; context.lineWidth = Math.max(Math.round(iw/200),0.5); context.stroke();				
				applyFlex(context,ix+inner,iy+inner,iw-radius,ih-radius,inner,ishineopac,ishinecol);
			}
			canvas.style.visibility = 'visible';
		}
	}
}

var bevelOnload = window.onload;
window.onload = function () { if(bevelOnload) bevelOnload(); if(isIE){addIEBevel(); }else {addBevel();}}