Фотоальбом с показом большого фото c анимац. эффектом (постепенное увеличение фото над окном) От клика маленькое окно с загибом справа внизу

Золотая библиотека JAVASCRIPT

1997

Библиотека JAVASCRIPT SE@RCHER

Библиотека JAVASCRIPT SE@RCHER

Библиотека JAVASCRIPT SE@RCHER

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. АПРЕЛЬ >>>

HTML ↴

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Фотоальбом с показом большого фото c анимац. эффектом (постепенное увеличение фото над окном) От клика маленькое окно с загибом справа внизу</title>
	<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
	a { color: blue; font-style:italic; text-decoration:none; }
	tt {color: green;}
	b {color: #993333;}
	body { background: url(backgrnd.jpg) silver; color: black; font-family: Georgia,serif; line-height: 1.5; margin: 2em 2em;}
	h2 { line-height: 1; }
	.demo { float: left; padding: 10px; }
	.logo { position: relative; width: 400px; height: 150px; white-space: nowrap;}
	#guru { padding: 4px; width: 99%; height: auto; text-align: center; background-color: black; }
	#guru div { border: solid 3px red; padding: 4px; font-family: monospace; font-size: 1.25em; width: auto; height: auto; color: red; text-align: center; text-decoration: blink; }
	#header { margin-bottom: 0; font-weight: normal; font-style: italic; color: gray; }
	.bookmarks { white-space: nowrap; width: 98%; margin: 0; padding-top: 10px; border-top: 1px dotted gray;}
</style>
	<script type="text/javascript">

function clipCurl(ctx,x,y,w,h,r,i){ctx.beginPath();ctx.moveTo(x,h);ctx.quadraticCurveTo(x+r,h,x+r,h-r);ctx.quadraticCurveTo(x+r,y+(2*r),x,y);ctx.quadraticCurveTo(x+(2*r),y+r,w-r,y+r);ctx.quadraticCurveTo(w,y+r,w,y);ctx.quadraticCurveTo(w,y+(r/2),w-(r-i),y+i);ctx.lineTo(x+i,h-(r-i));ctx.quadraticCurveTo(x+(r/2),h,x,h);ctx.closePath();}
function clipReversCurl(ctx,x,y,w,h,r,i){ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(0,h);ctx.lineTo(x,h);ctx.quadraticCurveTo(x+r,h,x+r,h-r);ctx.quadraticCurveTo(x+r,y+(2*r),x,y);ctx.quadraticCurveTo(x+(2*r),y+r,w-r,y+r);ctx.quadraticCurveTo(w,y+r,w,y);ctx.lineTo(w,0);ctx.closePath();}
function clipInversCurl(ctx,x,y,w,h,r,i){ctx.beginPath();ctx.moveTo(w,y);ctx.quadraticCurveTo(w,y+(r/2),w-(r-i),y+i);ctx.lineTo(x+i,h-(r-i));ctx.quadraticCurveTo(x+(r/2),h,x,h);ctx.lineTo(w,h);ctx.closePath();}
function clipCurlShadow(ctx,x,y,w,h,r,i){ctx.beginPath();ctx.moveTo(w,y);ctx.quadraticCurveTo(w,y+(r/2),w-(r-i),y+i);ctx.lineTo(x+i,h-(r-i));ctx.quadraticCurveTo(x+(r/2),h,x,h);ctx.lineTo(w,h);ctx.closePath();}
function curlShadow(ctx,s,r,i,o){var style;var f=1.27;style=ctx.createRadialGradient(i,r,0,i,r,i);style.addColorStop(0,'rgba(0,0,0,'+o+')');style.addColorStop(1,'rgba(0,0,0,0)');ctx.fillStyle=style;ctx.beginPath();ctx.rect(0,i,r,i);ctx.closePath();ctx.fill();style=ctx.createLinearGradient(0,0,r,0);style.addColorStop(0,'rgba(0,0,0,0)');style.addColorStop(0.5,'rgba(0,0,0,'+o+')');style.addColorStop(1,'rgba(0,0,0,0)');ctx.fillStyle=style;ctx.beginPath();ctx.rect(0,i+i,r,(s*f)-i-i);ctx.closePath();ctx.fill();style=ctx.createRadialGradient(i,(s*f),0,i,(s*f),i);style.addColorStop(0,'rgba(0,0,0,'+o+')');style.addColorStop(1,'rgba(0,0,0,0)');ctx.fillStyle=style;ctx.beginPath();ctx.rect(0,(s*f),r,i);ctx.closePath();ctx.fill();}
function hextorgb(val){function hex2dec(hex){return(Math.max(0,Math.min(parseInt(hex,16),255)));}
var cr=hex2dec(val.substr(1,2)),cg=hex2dec(val.substr(3,2)),cb=hex2dec(val.substr(5,2));return'rgb('+cr+','+cg+','+cb+')';}
var cvi_curl={defaultSize:33,defaultShadow:66,defaultColor:0,defaultInvert:false,defaultFilter:null,defaultCallback:null,add:function(image,options){if(image.tagName.toUpperCase()=="IMG"){var defopts={"size":cvi_curl.defaultSize,"shadow":cvi_curl.defaultShadow,"color":cvi_curl.defaultColor,"invert":cvi_curl.defaultInvert,"filter":cvi_curl.defaultFilter,"callback":cvi_curl.defaultCallback}
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 e=["shape","shapetype","group","background","path","formulas","handles","fill","stroke","shadow","textbox","textpath","imagedata","line","polyline","curve","roundrect","oval","rect","arc","image"],s=document.createStyleSheet();for(var i=0;i<e.length;i++){s.addRule("v\\:"+e[i],"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_curl.modify(canvas,options);}else{var canvas=document.createElement('canvas');if(canvas.getContext("2d")){canvas.options=options;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.style.height=imageHeight+'px';canvas.style.width=imageWidth+'px';canvas.height=imageHeight;canvas.width=imageWidth;object.replaceChild(canvas,image);cvi_curl.modify(canvas,options);}}}catch(e){}}},modify:function(canvas,options){try{var size=(typeof options['size']=='number'?options['size']:canvas.options['size']);canvas.options['size']=size;var shadow=(typeof options['shadow']=='number'?options['shadow']:canvas.options['shadow']);canvas.options['shadow']=shadow;var color=(typeof options['color']=='string'?options['color']:canvas.options['color']);canvas.options['color']=color;var invert=(typeof options['invert']=='boolean'?options['invert']:canvas.options['invert']);canvas.options['invert']=invert;var filter=(typeof options['filter']=='object'?options['filter']:canvas.options['filter']);canvas.options['filter']=filter;var callback=(typeof options['callback']=='string'?options['callback']:canvas.options['callback']);canvas.options['callback']=callback;var isize=size==0?0.33:size/100;var ishadow=shadow==0?0.66:shadow/100;var icolor=0;if(isNaN(color)){icolor=hextorgb(color);}
var ih=canvas.height;var iw=canvas.width;var cs=Math.floor(Math.min(iw,ih)*isize);var or=Math.floor(cs*0.15);var hr=Math.floor(or*0.5);var ir=Math.floor(or*0.8);var vr=Math.floor(or*0.25);var qr=Math.round(vr*0.25);var st='';var t;var ss=Math.floor(or*0.3);var xr=Math.floor(or*0.75);var yr=Math.floor(or*0.4);var hs=Math.floor(cs*0.5);var vs=Math.floor(cs*0.25);var dg=(Math.PI*90/180);var head,foot,shadow='',shade='',shine='',back='',fill='',strok='';if(document.all&&document.namespaces&&!window.opera){if(canvas.tagName.toUpperCase()=="VAR"){head='<v:group style="zoom:1;display:'+canvas.dpl+';margin:0;padding:0;position:relative;width:'+iw+'px;height:'+ih+'px;" coordsize="'+iw+','+ih+'"><v:rect strokeweight="0" filled="t" stroked="f" fillcolor="#ffffff" style="zoom:1;padding:0;position:absolute;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"><v:fill color="#ffffff" opacity="0.0" /></v:rect>';if(invert){shadow='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+iw+','+ih+'" path="m 0,'+ih+' l '+(iw-cs+yr)+','+ih+' c '+(iw-cs+yr)+','+ih+','+(iw-cs+yr)+','+ih+','+(iw-cs+xr)+','+(ih-vr)+' l '+(iw-vr)+','+(ih-cs+xr)+' c '+iw+','+(ih-cs+yr)+','+iw+','+(ih-cs+yr)+','+iw+','+(ih-cs)+' l '+iw+',0,'+iw+','+ih+' x e" style="position:absolute;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"><v:fill src="'+canvas.source+'" type="frame" /></v:shape>';back='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m '+hr+','+(cs-hr)+' l '+hr+','+(cs-hr-hr)+','+(cs-hr-hr)+','+hr+','+(cs-hr)+','+hr+' x e" style="position:absolute;top:'+(ih-cs+qr)+'px;left:'+(iw-cs+qr)+'px;width:'+cs+'px;height:'+cs+'px;filter:Alpha(opacity='+(ishadow*136)+'), progid:dxImageTransform.Microsoft.Blur(PixelRadius='+ss+',MakeShadow=false);"><v:fill color="#000000" /></v:shape>';}else{back='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+iw+','+ih+'" path="m 0,0 l 0,'+ih+' c '+(iw-cs+yr)+','+ih+','+(iw-cs+yr)+','+ih+','+(iw-cs+xr)+','+(ih-vr)+' l '+(iw-vr)+','+(ih-cs+xr)+' c '+iw+','+(ih-cs+yr)+','+iw+','+(ih-cs+yr)+','+iw+',0 x e" style="position:absolute;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"><v:fill src="'+canvas.source+'" type="frame" /></v:shape>';shadow='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m '+hr+','+(cs-hr)+' l '+hr+','+hr+','+(cs-hr)+','+hr+' x e" style="position:absolute;top:'+(ih-cs+qr)+'px;left:'+(iw-cs+qr)+'px;width:'+cs+'px;height:'+cs+'px;filter:Alpha(opacity='+(ishadow*136)+'), progid:dxImageTransform.Microsoft.Blur(PixelRadius='+ss+',MakeShadow=false);"><v:fill color="#000000" /></v:shape>';}
if(isNaN(icolor)||invert>0){icolor=(!isNaN(icolor)?"#808080":icolor);fill='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+xr+','+(cs-vr)+' l '+(cs-vr)+','+xr+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',0,0 x e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill color="'+icolor+'" /></v:shape>';shine='';strok='';}else{if(iw>ih){f=(ih/iw);t=(1-f)+((1-isize)*f);l=1-isize;}else if(ih>iw){t=1-isize;f=(iw/ih);l=(1-f)+((1-isize)*f);}else{t=1-isize;l=1-isize;}
fill='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 2,2 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+(xr+1)+','+(cs-vr+1)+' l '+(cs-vr+1)+','+(xr+1)+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',2,2 x e" style="rotation:180; filter:fliph() progid:DXImageTransform.Microsoft.BasicImage(rotation=1);position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill src="'+canvas.source+'" origin="'+t+','+l+'" type="tile" /></v:shape>';shine='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+xr+','+(cs-vr)+' l '+(cs-vr)+','+xr+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',0,0 x e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill color="#ffffff" opacity="0.75" /></v:shape>';strok='<v:shape strokeweight="1.5" filled="f" stroked="t" strokecolor="#808080" opacity="0" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+(ir-1)+','+vs+','+(or-1)+','+hs+','+(or-1)+','+(cs-or-1)+' qy 1,'+(cs-1)+' m '+(cs-1)+',1 qy '+(cs-or-1)+','+(or-1)+' c '+hs+','+(or-1)+','+vs+','+(ir-1)+',0,0 e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"></v:shape>';}
shade='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+xr+','+(cs-vr)+' l '+(cs-vr)+','+xr+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',0,0 x e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill method="linear sigma" type="gradient" focus="-0.15" angle="45" color="#000000" opacity="1" color2="#000000" o:opacity2="0" /></v:shape>';foot='</v:group>';canvas.innerHTML=head+shadow+back+fill+shine+shade+strok+foot;if(typeof window[callback]==='function'){window[callback](canvas.id,'cvi_curl');}}}else{if(canvas.tagName.toUpperCase()=="CANVAS"&&canvas.getContext("2d")){var context=canvas.getContext("2d"),prepared=(context.getImageData?true:false),alternate=false;var img=new Image();img.onload=function(){if(prepared&&(typeof cvi_filter!='undefined')&&filter!=null&&filter.length>0){iw=Math.round(iw);ih=Math.round(ih);var source=document.createElement('canvas');source.height=ih+4;source.width=iw+4;var src=source.getContext("2d");var buffer=document.createElement('canvas');buffer.height=ih;buffer.width=iw;var ctx=buffer.getContext("2d");if(src&&ctx){alternate=true;ctx.clearRect(0,0,iw,ih);ctx.drawImage(img,0,0,iw,ih);src.clearRect(0,0,iw+4,ih+4);src.drawImage(img,0,0,iw+4,ih+4);src.drawImage(img,2,2,iw,ih);for(var i in filter){cvi_filter.add(source,buffer,filter[i],iw,ih);}}}
context.clearRect(0,0,iw,ih);context.save();if(!invert){clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir);context.clip();if(!isNaN(icolor)){context.fillStyle='rgba(0,0,0,0)';context.fillRect(0,0,iw,ih);context.rotate(dg);context.scale(-1,1);context.translate(-(iw),-(ih));if(alternate){context.drawImage(source,2,2,iw,ih,-(ih-cs),-(iw-cs),iw,ih);}else{context.drawImage(img,-(ih-cs),-(iw-cs),iw,ih);}}}else{clipInversCurl(context,iw-cs,ih-cs,iw,ih,or,ir);context.clip();context.clearRect(0,0,iw,ih);if(alternate){context.drawImage(source,2,2,iw,ih,0,0,iw,ih);}else{context.drawImage(img,0,0,iw,ih);}}
context.restore();clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir);context.fillStyle='rgba(254,254,254,0.5)';if(isNaN(icolor))context.fillStyle=icolor;context.fill();clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir);context.strokeStyle='rgba(128,128,128,0.5)';context.stroke();clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir);st=context.createLinearGradient(iw-cs,ih-cs,iw-(cs*.455),ih-(cs*.455));st.addColorStop(0,'rgba(254,254,254,0.5)');st.addColorStop(0.33,'rgba(254,254,254,0)');st.addColorStop(0.33,'rgba(0,0,0,0)');st.addColorStop(0.4,'rgba(0,0,0,0.05)');st.addColorStop(0.5,'rgba(0,0,0,0.1)');st.addColorStop(0.75,'rgba(0,0,0,0.15)');st.addColorStop(0.85,'rgba(0,0,0,0.3)');st.addColorStop(0.99,'rgba(0,0,0,0.7)');st.addColorStop(1,'rgba(0,0,0,0.8)');context.fillStyle=st;context.fill();context.save();if(!invert){clipReversCurl(context,iw-cs,ih-cs,iw,ih,or,ir);context.clip();context.clearRect(0,0,iw,ih);if(alternate){context.drawImage(source,2,2,iw,ih,0,0,iw,ih);}else{context.drawImage(img,0,0,iw,ih);}
context.restore();}
context.save();clipCurlShadow(context,iw-cs,ih-cs,iw,ih,or,ir);context.clip();context.translate(iw,ih-cs);context.rotate((Math.PI/180)*45);context.scale(0.75,1);curlShadow(context,cs,or,hr,ishadow);context.restore();if(typeof window[callback]==='function'){window[callback](canvas.id,'cvi_curl');}}
img.src=canvas.source;}}}catch(e){}},replace:function(canvas){var object=canvas.parentNode;var img=document.createElement('img');img.id=canvas.id;img.alt=canvas.alt;img.title=canvas.title;img.src=canvas.source;img.height=canvas.height;img.width=canvas.width;img.className=canvas.className;img.style.cssText=canvas.style.cssText;img.style.height=canvas.height+'px';img.style.width=canvas.width+'px';object.replaceChild(img,canvas);},remove:function(canvas){if(document.all&&document.namespaces&&!window.opera){if(canvas.tagName.toUpperCase()=="VAR"){cvi_curl.replace(canvas);}}else{if(canvas.tagName.toUpperCase()=="CANVAS"){cvi_curl.replace(canvas);}}}}
</script>
<script type="text/javascript">
function toggle(obj){cvi_curl.defaultSize=50;cvi_curl.defaultColor="#ffeeaa";if(obj.tagName.toUpperCase()!='IMG'){cvi_curl.remove(obj);}else{cvi_curl.add(obj);}}
var size=100;var direct=true;function increase(obj){var max=100;if(obj.tagName.toUpperCase()!='IMG'){if(!direct&&size>5||size>=max){direct=false;size-=5;}else if(direct&&size<=5||size<max){direct=true;size+=5;}
cvi_curl.modify(obj,{size:size});}}
</script>
<script type="text/javascript">
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 e=["shape","shapetype","group","background","path","formulas","handles","fill","stroke","shadow","textbox","textpath","imagedata","line","polyline","curve","roundrect","oval","rect","arc","image"],s=document.createStyleSheet();for(var i=0;i<e.length;i++){s.addRule("v\\:"+e[i],"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 getClassColor(classes,string){var temp=0;var str='';var pos=string.length;for(var j=0;j<classes.length;j++){if(classes[j].indexOf(string)==0){temp=classes[j].substring(pos);str='#'+temp.toLowerCase();break;}}
if(str.match(/^#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)){return str;}else{return 0;}}
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 clipCurl(ctx,x,y,w,h,r,i){ctx.beginPath();ctx.moveTo(x,h);ctx.quadraticCurveTo(x+r,h,x+r,h-r);ctx.quadraticCurveTo(x+r,y+(2*r),x,y);ctx.quadraticCurveTo(x+(2*r),y+r,w-r,y+r);ctx.quadraticCurveTo(w,y+r,w,y);ctx.quadraticCurveTo(w,y+(r/2),w-(r-i),y+i);ctx.lineTo(x+i,h-(r-i));ctx.quadraticCurveTo(x+(r/2),h,x,h);ctx.closePath();}
function clipReversCurl(ctx,x,y,w,h,r,i){ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(0,h);ctx.lineTo(x,h);ctx.quadraticCurveTo(x+r,h,x+r,h-r);ctx.quadraticCurveTo(x+r,y+(2*r),x,y);ctx.quadraticCurveTo(x+(2*r),y+r,w-r,y+r);ctx.quadraticCurveTo(w,y+r,w,y);ctx.lineTo(w,0);ctx.closePath();}
function clipInversCurl(ctx,x,y,w,h,r,i){ctx.beginPath();ctx.moveTo(w,y);ctx.quadraticCurveTo(w,y+(r/2),w-(r-i),y+i);ctx.lineTo(x+i,h-(r-i));ctx.quadraticCurveTo(x+(r/2),h,x,h);ctx.lineTo(w,h);ctx.closePath();}
function clipCurlShadow(ctx,x,y,w,h,r,i){ctx.beginPath();ctx.moveTo(w,y);ctx.quadraticCurveTo(w,y+(r/2),w-(r-i),y+i);ctx.lineTo(x+i,h-(r-i));ctx.quadraticCurveTo(x+(r/2),h,x,h);ctx.lineTo(w,h);ctx.closePath();}
function curlShadow(ctx,s,r,i,o){var style;var f=1.27;style=ctx.createRadialGradient(i,r,0,i,r,i);style.addColorStop(0,'rgba(0,0,0,'+o+')');style.addColorStop(1,'rgba(0,0,0,0)');ctx.fillStyle=style;ctx.beginPath();ctx.rect(0,i,r,i);ctx.closePath();ctx.fill();style=ctx.createLinearGradient(0,0,r,0);style.addColorStop(0,'rgba(0,0,0,0)');style.addColorStop(0.5,'rgba(0,0,0,'+o+')');style.addColorStop(1,'rgba(0,0,0,0)');ctx.fillStyle=style;ctx.beginPath();ctx.rect(0,i+i,r,(s*f)-i-i);ctx.closePath();ctx.fill();style=ctx.createRadialGradient(i,(s*f),0,i,(s*f),i);style.addColorStop(0,'rgba(0,0,0,'+o+')');style.addColorStop(1,'rgba(0,0,0,0)');ctx.fillStyle=style;ctx.beginPath();ctx.rect(0,(s*f),r,i);ctx.closePath();ctx.fill();}
function addIECurl(){var theimages=getImages('curl');var image,object,vml,display,flt,classes,newClasses;var i,f,t,l,ih,iw,cs,or,hs,vs,ss,hr,ir,vr,qr,xr,yr,st;var isize,ishadow,icolor,invert,head,foot;var shadow='',shade='',shine='',back='',fill='',strok='';var children=document.getElementsByTagName('img');for(i=0;i<theimages.length;i++){image=theimages[i];object=image.parentNode;if(image.width>=64&&image.height>=64){classes=image.className.split(' ');isize=0;ishadow=0;icolor=0;invert=0;isize=getClassValue(classes,"isize");ishadow=getClassValue(classes,"ishadow");icolor=getClassColor(classes,"icolor");invert=getClassAttribute(classes,"invert");isize=isize==0?0.33:isize/100;ishadow=ishadow==0?0.66:ishadow/100;ih=image.height;iw=image.width;cs=Math.floor(Math.min(iw,ih)*isize);or=Math.floor(cs*0.15);hs=Math.floor(cs*0.5);vs=Math.floor(cs*0.25);ss=Math.floor(or*0.3);hr=Math.floor(or*0.5);ir=Math.floor(or*0.8);vr=Math.floor(or*0.25);qr=Math.round(vr*0.25);xr=Math.floor(or*0.75);yr=Math.floor(or*0.4);display=(image.currentStyle.display.toLowerCase()=='block')?'block':'inline-block';vml=document.createElement(['<var style="overflow:hidden;display:'+display+';clip:rect(0px '+iw+'px '+ih+'px 0px);width:'+iw+'px;height:'+ih+'px;padding:0;margin:0;">'].join(''));flt=image.currentStyle.styleFloat.toLowerCase();display=(flt=='left'||flt=='right')?'inline':display;head='<v:group style="zoom:1;display:'+display+';margin:0;padding:0;position:relative;width:'+iw+'px;height:'+ih+'px;" coordsize="'+iw+','+ih+'"><v:rect strokeweight="0" filled="t" stroked="f" fillcolor="#ffffff" style="zoom:1;padding:0;position:absolute;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"><v:fill color="#ffffff" opacity="0.0" /></v:rect>';if(invert>0){shadow='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+iw+','+ih+'" path="m 0,'+ih+' l '+(iw-cs+yr)+','+ih+' c '+(iw-cs+yr)+','+ih+','+(iw-cs+yr)+','+ih+','+(iw-cs+xr)+','+(ih-vr)+' l '+(iw-vr)+','+(ih-cs+xr)+' c '+iw+','+(ih-cs+yr)+','+iw+','+(ih-cs+yr)+','+iw+','+(ih-cs)+' l '+iw+',0,'+iw+','+ih+' x e" style="position:absolute;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"><v:fill src="'+image.src+'" type="frame" /></v:shape>';back='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m '+hr+','+(cs-hr)+' l '+hr+','+(cs-hr-hr)+','+(cs-hr-hr)+','+hr+','+(cs-hr)+','+hr+' x e" style="position:absolute;top:'+(ih-cs+qr)+'px;left:'+(iw-cs+qr)+'px;width:'+cs+'px;height:'+cs+'px;filter:Alpha(opacity='+(ishadow*136)+'), progid:dxImageTransform.Microsoft.Blur(PixelRadius='+ss+',MakeShadow=false);"><v:fill color="#000000" /></v:shape>';}else{back='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+iw+','+ih+'" path="m 0,0 l 0,'+ih+' c '+(iw-cs+yr)+','+ih+','+(iw-cs+yr)+','+ih+','+(iw-cs+xr)+','+(ih-vr)+' l '+(iw-vr)+','+(ih-cs+xr)+' c '+iw+','+(ih-cs+yr)+','+iw+','+(ih-cs+yr)+','+iw+',0 x e" style="position:absolute;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"><v:fill src="'+image.src+'" type="frame" /></v:shape>';shadow='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m '+hr+','+(cs-hr)+' l '+hr+','+hr+','+(cs-hr)+','+hr+' x e" style="position:absolute;top:'+(ih-cs+qr)+'px;left:'+(iw-cs+qr)+'px;width:'+cs+'px;height:'+cs+'px;filter:Alpha(opacity='+(ishadow*136)+'), progid:dxImageTransform.Microsoft.Blur(PixelRadius='+ss+',MakeShadow=false);"><v:fill color="#000000" /></v:shape>';}
if(isNaN(icolor)||invert>0){icolor=(!isNaN(icolor)?"#808080":icolor);fill='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+xr+','+(cs-vr)+' l '+(cs-vr)+','+xr+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',0,0 x e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill color="'+icolor+'" /></v:shape>';shine='';strok='';}else{if(iw>ih){f=(ih/iw);t=(1-f)+((1-isize)*f);l=1-isize;}else if(ih>iw){t=1-isize;f=(iw/ih);l=(1-f)+((1-isize)*f);}else{t=1-isize;l=1-isize;}
fill='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 2,2 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+(xr+1)+','+(cs-vr+1)+' l '+(cs-vr+1)+','+(xr+1)+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',2,2 x e" style="rotation:180; filter:fliph() progid:DXImageTransform.Microsoft.BasicImage(rotation=1);position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill src="'+image.src+'" origin="'+t+','+l+'" type="tile" /></v:shape>';shine='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+xr+','+(cs-vr)+' l '+(cs-vr)+','+xr+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',0,0 x e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill color="#ffffff" opacity="0.75" /></v:shape>';strok='<v:shape strokeweight="1.5" filled="f" stroked="t" strokecolor="#808080" opacity="0" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+(ir-1)+','+vs+','+(or-1)+','+hs+','+(or-1)+','+(cs-or-1)+' qy 1,'+(cs-1)+' m '+(cs-1)+',1 qy '+(cs-or-1)+','+(or-1)+' c '+hs+','+(or-1)+','+vs+','+(ir-1)+',0,0 e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"></v:shape>';}
shade='<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+xr+','+(cs-vr)+' l '+(cs-vr)+','+xr+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',0,0 x e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill method="linear sigma" type="gradient" focus="-0.15" angle="45" color="#000000" opacity="1" color2="#000000" o:opacity2="0" /></v:shape>';foot='</v:group>';vml.innerHTML=head+shadow+back+fill+shine+shade+strok+foot;vml.className=newClasses;vml.style.cssText=image.style.cssText;vml.style.height=ih+'px';vml.width=iw;vml.height=ih;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);vml.style.visibility='visible';}}}
function addCurl(){var theimages=getImages('curl');var image,object,canvas,context,classes,newClasses;var i,f,ih,iw,cs,or,ir,hr,st;var isize,ishadow,icolor,invert;var dg=(Math.PI*90/180);var children=document.getElementsByTagName('img');for(i=0;i<theimages.length;i++){image=theimages[i];object=image.parentNode;canvas=document.createElement('canvas');if(canvas.getContext&&image.width>=64&&image.height>=64){classes=image.className.split(' ');isize=0;ishadow=0;icolor=0;invert=0;isize=getClassValue(classes,"isize");ishadow=getClassValue(classes,"ishadow");icolor=getClassColor(classes,"icolor");invert=getClassAttribute(classes,"invert");newClasses=getClasses(classes,"curl");isize=isize==0?0.33:isize/100;ishadow=ishadow==0?0.66:ishadow/100;ih=image.height;iw=image.width;cs=Math.floor(Math.min(iw,ih)*isize);or=Math.floor(cs*0.15);hr=Math.floor(or*0.5);ir=Math.floor(or*0.8);canvas.className=newClasses;canvas.style.cssText=image.style.cssText;canvas.style.height=ih+'px';canvas.width=iw;canvas.style.width=iw+'px';canvas.height=ih;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'));context=canvas.getContext("2d");object.replaceChild(canvas,image);context.clearRect(0,0,iw,ih);context.save();if(invert<1){clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir);context.clip();if(!isNaN(icolor)){context.fillStyle='rgba(0,0,0,0)';context.fillRect(0,0,iw,ih);context.rotate(dg);context.scale(-1,1);context.translate(-(iw),-(ih));context.drawImage(image,-(ih-cs),-(iw-cs),iw,ih);}}else{clipInversCurl(context,iw-cs,ih-cs,iw,ih,or,ir);context.clip();context.clearRect(0,0,iw,ih);context.drawImage(image,0,0,iw,ih);}
context.restore();clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir);context.fillStyle='rgba(254,254,254,0.5)';if(isNaN(icolor))context.fillStyle=icolor;context.fill();clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir);context.strokeStyle='rgba(128,128,128,0.5)';context.stroke();clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir);st=context.createLinearGradient(iw-cs,ih-cs,iw-(cs*.455),ih-(cs*.455));st.addColorStop(0,'rgba(254,254,254,0.5)');st.addColorStop(0.33,'rgba(254,254,254,0)');st.addColorStop(0.33,'rgba(0,0,0,0)');st.addColorStop(0.4,'rgba(0,0,0,0.05)');st.addColorStop(0.5,'rgba(0,0,0,0.1)');st.addColorStop(0.75,'rgba(0,0,0,0.15)');st.addColorStop(0.85,'rgba(0,0,0,0.3)');st.addColorStop(0.99,'rgba(0,0,0,0.7)');st.addColorStop(1,'rgba(0,0,0,0.8)');context.fillStyle=st;context.fill();context.save();if(invert<1){clipReversCurl(context,iw-cs,ih-cs,iw,ih,or,ir);context.clip();context.clearRect(0,0,iw,ih);context.drawImage(image,0,0,iw,ih);}
context.restore();clipCurlShadow(context,iw-cs,ih-cs,iw,ih,or,ir);context.clip();context.save();context.translate(iw,ih-cs);context.rotate((Math.PI/180)*45);context.scale(0.75,1);curlShadow(context,cs,or,hr,ishadow);context.restore();canvas.style.visibility='visible';}}}
</script>
</head>
<BODY>
<br>
<div class="demo" onclick="toggle(document.getElementById('img1'));javascript:window.open('../2013-03/001.jpg','byn','width=600,height=700,top=10,left=200,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');document.close()">
<img src="../2013-03/001.jpg" id="img1" title="Click to add/remove curl" alt="1" width=300px>
</div>
<div class="demo" onclick="toggle(document.getElementById('img2'));javascript:window.open('../2013-03/002.jpg','byn','width=600,height=700,top=10,left=200,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');document.close()">
<img src="../2013-03/002.jpg" id="img2" title="Click to add/remove curl" alt="2" width=300px>
</div>
<div class="demo" onclick="toggle(document.getElementById('img3'));javascript:window.open('../2013-03/003.jpg','byn','width=600,height=700,top=10,left=200,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');document.close()">
<img src="../2013-03/003.jpg" id="img3" title="Click to add/remove curl" alt="3" width=300px>
</div>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

размер Kb

ПРИМЕР ↴

✔ пример в полном окне

Библиотека JAVASCRIPT 1997- Дизайн и сопровождение © SE@RCHER