bevel.js

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

/**
 * bevel.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
**/

var tmp = navigator.appName == 'Microsoft Internet Explorer' && navigator.userAgent.indexOf('Opera') < 1 ? 1 : 0;
if(tmp) var isIE = document.namespaces ? 1 : 0;

if(isIE) {
	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");
	}
}

function getImages(className){
	var children = document.getElementsByTagName('img'); 
	var elements = new Array(); var i = 0;
	var child; var classNames; var j = 0;
	for (i=0;i<children.length;i++) {
		child = children[i];
		classNames = child.className.split(' ');
		for (var j = 0; j < classNames.length; j++) {
			if (classNames[j] == className) {
				elements.push(child);
				break;
			}
		}
	}
	return elements;
}

function getClasses(classes,string){
	var temp = '';
	for (var j=0;j<classes.length;j++) {
		if (classes[j] != string) {
			if (temp) {
				temp += ' '
			}
			temp += classes[j];
		}
	}
	return temp;
}

function getClassValue(classes,string){
	var temp = 0; var pos = string.length;
	for (var j=0;j<classes.length;j++) {
		if (classes[j].indexOf(string) == 0) {
			temp = Math.min(classes[j].substring(pos),100);
			break;
		}
	}
	return Math.max(0,temp);
}

function getClassAttribute(classes,string){
	var temp = 0; var pos = string.length;
	for (var j=0;j<classes.length;j++) {
		if (classes[j].indexOf(string) == 0) {
			temp = 1; 
			break;
		}
	}
	return temp;
}

function getClassHexColor(classes,string,color){
	var temp, val = color, pos = string.length;
	for (var j=0;j<classes.length;j++) {
		if (classes[j].indexOf(string) == 0) {
			temp = classes[j].substring(pos);
			val = temp.toLowerCase();
			break;
		}
	}
	if(!val.match(/^[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) {val = color||'000000'; }
	if(isIE) {return val; }else {var mx=254;
		function hex2dec(hex){return(Math.max(0,Math.min(parseInt(hex,16),255)));}
		var cr=hex2dec(val.substr(0,2)),cg=hex2dec(val.substr(2,2)),cb=hex2dec(val.substr(4,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();
}

function addIEBevel() {
	var theimages = getImages('bevel');
	var image, object, vml, display, flt, classes, newClasses;
	var ww, hh, iw, ih, ix, iy, i, t, f, p, ro, ri, r, mask, radius, inner;
	var iglowcol, ishinecol, ishadecol, ibackcol, ifillcol, usemask, noshine;
	var iglowopac, ishineopac, ishadeopac, iradius, noglow, noshade, islinear;
	var head, foot, glow, fill, shade, shine, high, left, right, oline;
	for (i=0;i<theimages.length;i++) {
		image = theimages[i]; object = image.parentNode;