cvi_bevel_lib.js

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

/**
 * cvi_bevel_lib.js 1.2 (04-Sep-2008)
 * (c) by Christian Effenberger 
 * All Rights Reserved
 * Source: bevel.netzgesta.de
 * Distributed under Netzgestade Software License Agreement
 * http://www.netzgesta.de/cvi/LICENSE.txt
 * License permits free of charge
 * use on non-commercial and 
 * private web sites only 
 * syntax:
	cvi_bevel.defaultRadius = 20;				//INT 20-40 (%)	
	cvi_bevel.defaultGlow = 33;					//INT 1-100 (% opacity)
	cvi_bevel.defaultShine = 40;				//INT 1-100 (% opacity)
	cvi_bevel.defaultShade = 50;				//INT 1-100 (% opacity)
	cvi_bevel.defaultGlowcolor = '#000000';		//STR '#000000'-'#ffffff' 
	cvi_bevel.defaultShinecolor = '#ffffff';	//STR '#000000'-'#ffffff' 
	cvi_bevel.defaultShadecolor = '#000000';	//STR '#000000'-'#ffffff' 
	cvi_bevel.defaultBackcolor = '#0080ff';		//STR '#000000'-'#ffffff' 
	cvi_bevel.defaultFillcolor = '#0080ff';		//STR '#000000'-'#ffffff' 
	cvi_bevel.defaultLinear = false;			//BOOLEAN
	cvi_bevel.defaultUsemask = false;			//BOOLEAN
	cvi_bevel.defaultNoglow = false;			//BOOLEAN
	cvi_bevel.defaultNoshine = false;			//BOOLEAN
	cvi_bevel.defaultNoshade = false;			//BOOLEAN
	cvi_bevel.remove( image );
	cvi_bevel.add( image, options );
	cvi_bevel.modify( image, options );
	cvi_bevel.add( image, { radius: value, glow: value, shine: value, shade: value, glowcolor: value, shinecolor: value, shadecolor: value, backcolor: value, fillcolor: value, linear: value, noglow: value, noshine: value, noshade: value, usemask: value } );
	cvi_bevel.modify( image, { radius: value, glow: value, shine: value, shade: value, glowcolor: value, shinecolor: value, shadecolor: value, backcolor: value, fillcolor: value, linear: value, noglow: value, noshine: value, noshade: value, usemask: value } );
 *
**/

function getRGB(val) {
	function hex2dec(hex){return(Math.max(0,Math.min(parseInt(hex,16),255)));}
	var mx=254,cr=hex2dec(val.substr(1,2)),cg=hex2dec(val.substr(3,2)),cb=hex2dec(val.substr(5,2));
	return Math.min(cr,mx)+','+Math.min(cg,mx)+','+Math.min(cb,mx);
}

function getRadius(radius,width,height){
	var part = (Math.min(width,height)/100);
	radius = Math.max(Math.min(100,radius/part),0);
	return radius+'%';
}

function applyForm(ctx,x,y,w,h,r,o,f) {
	var z=o?Math.round(r*((window.opera?0.3:0.25)*f)):0; 
	ctx.beginPath(); ctx.moveTo(x,y+r); ctx.lineTo(x,y+h-r);
	ctx.quadraticCurveTo(x+z,y+h-z,x+r,y+h); ctx.lineTo(x+w-r,y+h);
	ctx.quadraticCurveTo(x+w-z,y+h-z,x+w,y+h-r); ctx.lineTo(x+w,y+r);
	ctx.quadraticCurveTo(x+w-z,y+z,x+w-r,y); ctx.lineTo(x+r,y);
	ctx.quadraticCurveTo(x+z,y+z,x,y+r); ctx.closePath();
}

function applyFlex(ctx,x,y,w,h,r,o,c) {
	ctx.beginPath();ctx.moveTo(x-r,y-r); ctx.lineTo(x-r,y+r);
	ctx.lineTo(x,y+(r*2)); ctx.lineTo(x,y+r); ctx.quadraticCurveTo(x,y,x+r,y); 
	ctx.lineTo(x+(r*2),y); ctx.lineTo(x+r,y-r); ctx.closePath();
	var st=ctx.createRadialGradient(x+(r/4),y+(r/4),0,x+(r/4),y+(r/4),r);
	st.addColorStop(0,'rgba('+c+','+o+')'); st.addColorStop(1,'rgba('+c+',0)');
	ctx.fillStyle=st; ctx.fill();
	ctx.beginPath(); ctx.moveTo(x+w+r,y-r); ctx.lineTo(x+w+r,y+r); 
	ctx.lineTo(x+w,y+(r*2)); ctx.lineTo(x+w,y+r); ctx.quadraticCurveTo(x+w,y,x+w-r,y); 
	ctx.lineTo(x+w-(r*2),y); ctx.lineTo(x+w-r,y-r); ctx.closePath();
	st=ctx.createRadialGradient(x+w-(r/4),y+(r/4),0,x+w-(r/4),y+(r/4),r);
	st.addColorStop(0,'rgba('+c+','+o+')'); st.addColorStop(1,'rgba('+c+',0)');
	ctx.fillStyle=st; ctx.fill();
}

function applyGlow(ctx,x,y,w,h,r,o,c) {
	function setRS(ctx,x1,y1,r1,x2,y2,r2,o,c) {
		var opt=Math.min(parseFloat(o+0.1),1.0),tmp=ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
		tmp.addColorStop(0,'rgba('+c+','+opt+')'); tmp.addColorStop(0.25,'rgba('+c+','+o+')');
		tmp.addColorStop(1,'rgba('+c+',0)'); return tmp;
	}
	function setLS(ctx,x,y,w,h,o,c) {
		var opt=Math.min(parseFloat(o+0.1),1.0),tmp=ctx.createLinearGradient(x,y,w,h);
		tmp.addColorStop(0,'rgba('+c+','+opt+')'); tmp.addColorStop(0.25,'rgba('+c+','+o+')');
		tmp.addColorStop(1,'rgba('+c+',0)'); return tmp;
	}
	var st,os=Math.round(Math.min(w,h)*(window.opera?0.058:0.05));
	ctx.beginPath(); ctx.rect(x+r,y,w-(r*2),r); ctx.closePath();	
	st=setLS(ctx,x+r,y+os,x+r,y,o,c); ctx.fillStyle=st; ctx.fill();
	ctx.beginPath(); ctx.rect(x,y+r,r,h-(r*2)); ctx.closePath();
	st=setLS(ctx,x+os,y+r,x,y+r,o,c); ctx.fillStyle=st; ctx.fill();
	ctx.beginPath(); ctx.rect(x+r,y+h-r,w-x-(r*2),r); ctx.closePath();
	st=setLS(ctx,x+r,y+h-os,x+r,y+h,o,c); ctx.fillStyle=st; ctx.fill();
	ctx.beginPath(); ctx.rect(x+w-r,y+r,r,h-y-(r*2)); ctx.closePath();
	st=setLS(ctx,x+w-os,y+r,x+w,y+r,o,c); ctx.fillStyle=st; ctx.fill();
	ctx.beginPath(); ctx.rect(x,y,r,r); ctx.closePath();
	st=setRS(ctx,x+r,y+r,r-os,x+r,y+r,r,o,c); ctx.fillStyle=st; ctx.fill();
	ctx.beginPath(); ctx.rect(x,y+h-r,r,r); ctx.closePath();
	st=setRS(ctx,x+r,y+h-r,r-os,x+r,y+h-r,r,o,c); ctx.fillStyle=st; ctx.fill();
	ctx.beginPath(); ctx.rect(w-r,h-r,x+r,y+r); ctx.closePath();
	st=setRS(ctx,w-r,h-r,r-os+x,w-r,h-r,y+r,o,c); ctx.fillStyle=st; ctx.fill();
	ctx.beginPath(); ctx.rect(x+w-r,y,r,r); ctx.closePath();
	st=setRS(ctx,x+w-r,y+r,r-os,x+w-r,y+r,r,o,c); ctx.fillStyle=st; ctx.fill();
}

function applyMask(ctx,x,y,w,h,r,o,c,i,z) {
	function setRS(ctx,x1,y1,r1,x2,y2,r2,o,c,i,z) {
		var sg=(i==true?o:0),eg=(i==true?0:o),mg=eg*(z==true?0.9:0.7);
		var tmp=ctx.createRadialGradient(x1,y1,r1,x2,y2,r2); tmp.addColorStop(0,'rgba('+c+','+sg+')');
		if(z==false) {tmp.addColorStop(0.9,'rgba('+c+','+mg+')');}tmp.addColorStop(1,'rgba('+c+','+eg+')'); return tmp;
	}
	function setLS(ctx,x,y,w,h,o,c,i,z) {
		var sg=(i==true?o:0),eg=(i==true?0:o),mg=eg*(z==true?0.9:0.7);
		var tmp=ctx.createLinearGradient(x,y,w,h); tmp.addColorStop(0,'rgba('+c+','+sg+')');
		if(z==false) {tmp.addColorStop(0.9,'rgba('+c+','+mg+')');}tmp.addColorStop(1,'rgba('+c+','+eg+')'); return tmp;
	}
	var st,os=r,p=Math.round(r/8); ctx.fillStyle='rgba('+c+','+o+')';
	if(i) {ctx.beginPath(); ctx.rect(x+r,y+r,w-(r*2),h-(r*2)); ctx.closePath(); ctx.fill();}
	if(window.opera && !i) {
		ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(x,y+r); ctx.quadraticCurveTo(x+p,y+p,x+r,y); ctx.closePath(); ctx.fill();
		ctx.beginPath(); ctx.moveTo(x+w,y); ctx.lineTo(x+w,y+r); ctx.quadraticCurveTo(x+w-p,y+p,x+w-r,y); ctx.closePath(); ctx.fill();
		ctx.beginPath(); ctx.moveTo(x+w,y+h); ctx.lineTo(x+w,y+h-r); ctx.quadraticCurveTo(x+w-p,y+h-p,x+w-r,y+h); ctx.closePath(); ctx.fill();
		ctx.beginPath(); ctx.moveTo(x,y+h); ctx.lineTo(x,y+h-r); ctx.quadraticCurveTo(x+p,y+h-p,x+r,y+h); ctx.closePath(); ctx.fill();
	}
	ctx.beginPath(); ctx.rect(x+r,y,w-(r*2),os); ctx.closePath(); st=setLS(ctx,x+r,y+os,x+r,y,o,c,i,z); ctx.fillStyle=st; ctx.fill();
	ctx.beginPath(); ctx.rect(x,y,r,r); ctx.closePath(); st=setRS(ctx,x+r,y+r,r-os,x+r,y+r,r,o,c,i,z); ctx.fillStyle=st; ctx.fill();
	ctx.beginPath(); ctx.rect(x,y+r,os,h-(r*2)); ctx.closePath(); st=setLS(ctx,x+os,y+r,x,y+r,o,c,i,z); ctx.fillStyle=st; ctx.fill();
	ctx.beginPath(); ctx.rect(x,y+h-r,r,r); ctx.closePath(); st=setRS(ctx,x+r,y+h-r,r-os,x+r,y+h-r,r,o,c,i,z); ctx.fillStyle=st; ctx.fill();
	ctx.beginPath(); ctx.rect(x+r,y+h-os,w-(r*2),os); ctx.closePath(); st=setLS(ctx,x+r,y+h-os,x+r,y+h,o,c,i,z); ctx.fillStyle=st; ctx.fill();
	ctx.beginPath(); ctx.rect(x+w-r,y+h-r,r,r); ctx.closePath(); st=setRS(ctx,x+w-r,y+h-r,r-os,x+w-r,y+h-r,r,o,c,i,z); ctx.fillStyle=st; ctx.fill();
	ctx.beginPath(); ctx.rect(x+w-os,y+r,os,h-(r*2)); ctx.closePath(); st=setLS(ctx,x+w-os,y+r,x+w,y+r,o,c,i,z); ctx.fillStyle=st; ctx.fill(); 
	ctx.beginPath(); ctx.rect(x+w-r,y,r,r); ctx.closePath(); st=setRS(ctx,x+w-r,y+r,r-os,x+w-r,y+r,r,o,c,i,z); ctx.fillStyle=st; ctx.fill();
}

var cvi_bevel = {
	defaultRadius : 20,
	defaultGlow : 33,
	defaultShine : 40,
	defaultShade : 50,
	defaultGlowcolor : '#000000', 
	defaultShinecolor : '#ffffff', 
	defaultShadecolor : '#000000', 
	defaultBackcolor : '#0080ff', 
	defaultFillcolor : '#0080ff', 
	defaultLinear : false,
	defaultUsemask : false,
	defaultNoglow : false,
	defaultNoshine : false,
	defaultNoshade : false,
	add: function(image, options) {
		if(image.tagName.toUpperCase() == "IMG") {
			var defopts = { "radius" : cvi_bevel.defaultRadius, "glow" : cvi_bevel.defaultGlow, "shine" : cvi_bevel.defaultShine, "shade" : cvi_bevel.defaultShade, "glowcolor" : cvi_bevel.defaultGlowcolor, "shinecolor" : cvi_bevel.defaultShinecolor, "shadecolor" : cvi_bevel.defaultShadecolor, "backcolor" : cvi_bevel.defaultBackcolor, "fillcolor" : cvi_bevel.defaultFillcolor, "linear" : cvi_bevel.defaultLinear, "noglow" : cvi_bevel.defaultNoglow, "noshine" : cvi_bevel.defaultNoshine, "noshade" : cvi_bevel.defaultNoshade, "usemask" : cvi_bevel.defaultUsemask }
			if(options) {
				for(var i in defopts) { if(!options[i]) { options[i] = defopts[i]; }}
			}else {
				options = defopts;
			}
			var imageWidth  = ('iwidth'  in options) ? parseInt(options.iwidth)  : image.width;
			var imageHeight = ('iheight' in options) ? parseInt(options.iheight) : image.height;
			try {
				var object = image.parentNode; 
				if(document.all && document.namespaces && !window.opera) {
					if(document.namespaces['v'] == null) {
						var stl = document.createStyleSheet();
						stl.addRule("v\\:*", "behavior: url(#default#VML);"); 
						document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
					}
					var display = (image.currentStyle.display.toLowerCase()=='block')?'block':'inline-block';        
					var canvas = document.createElement(['<var style="zoom:1;overflow:hidden;display:' + display + ';width:' + imageWidth + 'px;height:' + imageHeight + 'px;padding:0;">'].join(''));
					var flt =  image.currentStyle.styleFloat.toLowerCase();
					display = (flt=='left'||flt=='right')?'inline':display;
					canvas.options = options;
					canvas.dpl = display;
					canvas.id = image.id;
					canvas.alt = image.alt;
					canvas.name = image.name;
					canvas.title = image.title;
					canvas.source = image.src;
					canvas.className = image.className;
					canvas.style.cssText = image.style.cssText;
					canvas.height = imageHeight;
					canvas.width = imageWidth;
					object.replaceChild(canvas,image);
					cvi_bevel.modify(canvas, options);
				}else {
					var canvas = document.createElement('canvas');
					if(canvas.getContext("2d")) {