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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <HEAD> <TITLE>Фото в оригинальном обрамлениии Фото от клика с показом большого фото c анимац. эффектом (постепенное увеличение фото над окном) маленькое фото при наведении обрамляется плывущим цветным бордюром</TITLE> <script language="javascript"> var imageArr=["002.jpg"]imageSize=100 isCentered=0 isThumbs=1 autoRun=0 autoRunTime=3 var preload=[]for(var i=0;i<imageArr.length;i++){preload[i]=new Image()preload[i].src=imageArr[i]}function initIG8(){opac=0 aniTimer=""running=0 fadeStep=2 stepNum=50 lastNum=null fadeOutTimer=""fadeInTimer=""autoCount=0 autoTimer=""if(isThumbs==1){g8Thumbs=document.getElementsByName("ig8tn")for(var i=0;i<g8Thumbs.length;i++){g8Thumbs[i].i=i g8Thumbs[i].onclick=function(){clearTimeout(autoTimer);nextG8Pic(this.i)}g8Thumbs[i].onmousedown=function(){this.className="g8mousedown"}g8Thumbs[i].onmouseup=function(){this.className="g8mouseup"}g8Thumbs[i].className="g8mouseup"}}g8Box=document.getElementById("g8box")g8Img=document.getElementById("g8img")if(g8Box.parentNode.nodeName=="TD"){tdCenterX=g8Box.parentNode.offsetWidth/2}else{tdCenterX=0}border=0 if(document.defaultView&&document.defaultView.getComputedStyle){border=parseInt(document.defaultView.getComputedStyle(g8Box,'').getPropertyValue("border-left-width"))}if(isCentered==0){defaultLeft=g8Box.offsetLeft+tdCenterX-border defaultTop=g8Box.offsetTop-border}else{defaultLeft=document.body.clientWidth/2 defaultTop=document.body.clientHeight/2}g8Box.style.left=defaultLeft+"px"g8Box.style.top=defaultTop+"px"if(autoRun==1){autoRunner()}}function nextG8Pic(num){if(lastNum==num||running==1){return}closing=false running=1 autoCount=num currentLeft=g8Box.offsetLeft currentTop=g8Box.offsetTop currentWidth=g8Box.offsetWidth-(border*2)currentHeight=g8Box.offsetHeight-(border*2)if(num==-1){newWidth=wStep newHeight=hStep wDirection="in"hDirection="in"closing=true}else{newWidth=preload[num].width/100*imageSize newHeight=preload[num].height/100*imageSize}if(newWidth>currentWidth){wStep=(newWidth-currentWidth)/stepNum}else{wStep=(currentWidth-newWidth)/stepNum}if(newHeight>currentHeight){hStep=(newHeight-currentHeight)/stepNum}else{hStep=(currentHeight-newHeight)/stepNum}g8Box.style.visibility="visible"wDone=false hDone=false lastNum=num if(newWidth==currentWidth&&newHeight==currentHeight){fadeOutG8()setTimeout("g8Img.src=preload["+num+"].src;fadeInG8()",1000)return}fadeOutG8()animateG8(num)}function animateG8(num){if(newWidth>currentWidth){currentWidth+=wStep currentLeft-=wStep/2 wDirection="out"}else{currentWidth-=wStep currentLeft+=wStep/2 wDirection="in"}if(newHeight>currentHeight){currentHeight+=hStep currentTop-=hStep/2+600 hDirection="out"}else{currentHeight-=hStep currentTop+=hStep/2+600 hDirection="in"}aniTimer=setTimeout("animateG8("+num+")",10)if(wDirection=="out"&¤tWidth>=newWidth-wStep/2){wDone=true}if(wDirection=="in"&¤tWidth<=newWidth+wStep/2){wDone=true}if(hDirection=="out"&¤tHeight>=newHeight-hStep/2){hDone=true}if(hDirection=="in"&¤tHeight<=newHeight+hStep/2){hDone=true}if(wDone&&hDone){clearTimeout(aniTimer)if(closing){g8Box.style.visibility="hidden"currentWidth=1 currentHeight=1 currentLeft=defaultLeft currentTop=defaultTop running=0}else{fadeInG8()if(num!=-1){g8Img.src=preload[num].src}currentWidth=newWidth currentHeight=newHeight currentLeft=defaultLeft-(newWidth/2)currentTop=defaultTop-(newHeight/2-400)}}g8Box.style.left=currentLeft+"px"g8Box.style.top=currentTop+"px"g8Box.style.width=currentWidth+"px"g8Box.style.height=currentHeight+"px"}function fadeOutG8(){opac-=fadeStep fadeOutTimer=setTimeout("fadeOutG8()",5)if(opac<10){clearTimeout(fadeOutTimer)}if("filters"in document.body&&"alpha"in document.body.filters){g8Img.filters.alpha.Opacity=opac}else{g8Img.style.opacity=(opac/100)-0.001}}function fadeInG8(){opac+=fadeStep fadeInTimer=setTimeout("fadeInG8()",5)if(opac>100){clearTimeout(fadeInTimer)opac=100 running=0}if("filters"in document.body&&"alpha"in document.body.filters){g8Img.filters.alpha.Opacity=opac}else{g8Img.style.opacity=(opac/100)-0.001}}function autoRunner(){nextG8Pic(autoCount)if(autoCount<imageArr.length-1){autoCount++}else{autoCount=0}autoTimer=setTimeout("autoRunner()",autoRunTime*1000)} </script> <style> #thumbs img{ width:200px; height:300px; margin-bottom:20px; padding:10; } .g8mousedown{border:2px inset white} .g8mouseup{border:2px outset white} </style> <style> #v3 { width: 230px;margin: 10px auto 5px;} .text { border: 1px solid #B0BCC2;border-width: 0 1px;padding: 5px 10px;} .v3 { height: 1px;font-size: 1px;display: block;overflow: hidden;border: 1px solid #B8C3C8;border-width: 0 1px;} .b1, .b2, .b3, .b4, .b5,.b1 i, .b2 i, .b3 i, .b4 i, .b5 i,.b1 b, .b2 b, .b3 b, .b4 b, .b5 b,.b1 q, .b2 q, .b3 q, .b4 q, .b5 q { height: 1px;font-size: 1px;overflow: hidden;border-style: solid;border-width: 0 1px;display: block;} .b1 { margin: 0 2px;background: #EBEEF0;border: none;} .b1 b { margin: 0 1px;background: #B8C3C8; border-color: #CBD3D7;} .b2 {margin: 0 1px;border-color: #D6DCDF;} .b2 b {border-color: #B8C3C8;} .b2 i {border-color: #E4E8EA;} .b2 q {border-color: #F7F8F9;} .b3 {border-color: #EBEEEF;} .b3 b {border-color: #BCC6CB;} .b3 i {border-color: #F9FAFB;} .b4 {border-color: #CAD2D6;} .b4 b {border-color: #E5E9EB;} .b5 {border-color: #B5C0C6;} .b5 b {border-color: #FAFBFB;} </style> <SCRIPT type=text/javascript> var zxcBdy;var zxcCnt=0;function zxcAddOutLine(){if(!zxcBdy){zxcBdy=document.getElementsByTagName('BODY')[0];zxcPnt=document.createElement('DIV');zxcBdy.appendChild(zxcPnt);zxcPnts=zxcPnt.style;zxcPnts.position='absolute';zxcPnts.overflow='hidden';zxcPnts.left='-1000px';} zxcargs=zxcAddOutLine.arguments if(typeof(zxcargs[0])=='string'){zxcargs[0]=document.getElementById(zxcargs[0]);} if(!zxcargs[0].oop){zxcargs[0].oop=new zxcOOP(zxcargs);zxcargs[0].oop.makeline();zxcargs[0].to=null;zxcargs[0].make=true;if(!zxcargs[1].toUpperCase().match('N')){zxcargs[0].toggle=true;} return;} if(!zxcargs[0].init||!zxcargs[0].toggle){return;} clearTimeout(zxcargs[0].to);if(zxcargs[0].make){zxcargs[0].make=false;} else{zxcargs[0].make=true;} zxcargs[0].oop.linetoggle();} function zxcPos(zxc){zxcObjLeft=zxc.offsetLeft;zxcObjTop=zxc.offsetTop;while(zxc.offsetParent!=null){zxcObjParent=zxc.offsetParent;zxcObjLeft+=zxcObjParent.offsetLeft;zxcObjTop+=zxcObjParent.offsetTop;zxc=zxcObjParent;} return[zxcObjLeft,zxcObjTop];} function zxcOOP(zxcarg){this.obj=zxcarg[0];zxcary=[];for(zxc0=7;zxc0<zxcarg.length;zxc0++){zxcary[zxc0-7]=zxcarg[zxc0];} this.ref='zxcoop'+zxcCnt;window[this.ref]=this;this.lcnt=0;this.wd=this.obj.offsetWidth;this.ht=this.obj.offsetHeight;this.lt=zxcPos(this.obj)[0];this.tp=zxcPos(this.obj)[1];this.make=[];this.points=[];zxcCnt++;if(zxcary.length==0){zxcary[0]=['T'];zxcary[1]=['B'];zxcary[2]=['L'];zxcary[3]=['R'];} for(zxc1=0;zxc1<zxcary.length;zxc1++){for(zxc2=1;zxc2<6;zxc2++){if(!zxcary[zxc1][zxc2]){zxcary[zxc1][zxc2]=zxcarg[zxc2+1];}} if(zxcary[zxc1][0].toUpperCase().match('T')){this.make[zxc1]=[true,zxcary[zxc1][2],zxcary[zxc1][3],zxcary[zxc1][4],0,0,this.wd+zxcary[zxc1][1]*2,zxcary[zxc1][1],zxcary[zxc1][1],this.lt-zxcary[zxc1][1],this.tp-zxcary[zxc1][1],zxcary[zxc1][5]];} if(zxcary[zxc1][0].toUpperCase().match('B')){this.make[zxc1]=[true,zxcary[zxc1][2],zxcary[zxc1][3],zxcary[zxc1][4],0,0,this.wd+zxcary[zxc1][1]*2,zxcary[zxc1][1],zxcary[zxc1][1],this.lt-zxcary[zxc1][1],this.tp+this.ht,zxcary[zxc1][5]];} if(zxcary[zxc1][0].toUpperCase().match('L')){this.make[zxc1]=[false,zxcary[zxc1][2],zxcary[zxc1][3],0,zxcary[zxc1][4],zxcary[zxc1][1],zxcary[zxc1][1],0,this.ht+zxcary[zxc1][1]*2,this.lt-zxcary[zxc1][1],this.tp-zxcary[zxc1][1],zxcary[zxc1][5]];} if(zxcary[zxc1][0].toUpperCase().match('R')){this.make[zxc1]=[false,zxcary[zxc1][2],zxcary[zxc1][3],0,zxcary[zxc1][4],zxcary[zxc1][1],zxcary[zxc1][1],0,this.ht+zxcary[zxc1][1]*2,this.lt+this.wd,this.tp-zxcary[zxc1][1],zxcary[zxc1][5]];}}} zxcOOP.prototype.makeline=function(){this.p=zxcPnt.cloneNode(false);this.points[this.lcnt]=this.p;this.line=this.make[this.lcnt];if(this.line[11]&&this.effects){this.effects();} this.pS=this.p.style;this.pS.width=this.line[5]+'px';this.pS.height=this.line[7]+'px';this.pS.left=this.line[9]+'px';this.pS.top=this.line[10]+'px';this.pS.backgroundColor=this.line[1];zxcBdy.appendChild(this.p);this.points.push(this.p);this.replaceline();} zxcOOP.prototype.replaceline=function(){this.pS.width=(parseInt(this.pS.width)+this.line[3])+'px';this.pS.height=(parseInt(this.pS.height)+this.line[4])+'px';this.center();if(parseInt(this.pS.width)<this.line[6]||parseInt(this.pS.height)<this.line[8]){this.setTimeOut("replaceline();",this.line[2]);} else{this.pS.width=(this.line[6])+'px';this.pS.left=(this.line[9])+'px';this.pS.height=(this.line[8])+'px';this.pS.top=this.line[10]+'px';if(this.lcnt<this.make.length-1){this.lcnt++;if(this.obj.init){this.linetoggle();} else{this.makeline();}} else{this.obj.init=true;}}} zxcOOP.prototype.linetoggle=function(){this.p=this.points[this.lcnt];this.line=this.make[this.lcnt];this.pS=this.p.style;if(this.obj.make){this.replaceline();} else{this.removeline();}} zxcOOP.prototype.removeline=function(){this.pS.width=(parseInt(this.pS.width)-this.line[3])+'px';this.pS.height=(parseInt(this.pS.height)-this.line[4])+'px';this.center();if((this.line[0]&&parseInt(this.pS.width)>this.line[3])||(!this.line[0]&&parseInt(this.pS.height)>this.line[4])){this.setTimeOut("removeline();",this.line[2]);} else{if(this.line[0]){this.pS.width='0px';} else{this.pS.height='0px';} if(this.lcnt>0){this.lcnt--;this.linetoggle();}}} zxcOOP.prototype.center=function(){if(this.line[0]){this.pS.left=(this.lt+(this.wd-parseInt(this.pS.width))/2)+'px';} else{this.pS.top=(this.tp+(this.ht-parseInt(this.pS.height))/2)+'px';}} zxcOOP.prototype.setTimeOut=function(zxcf,zxcd){this.obj.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);}</SCRIPT><SCRIPT type=text/javascript>zxcOOP.prototype.effects=function(){this.d=zxcPnt.cloneNode(false);this.dS=this.d.style;this.dS.top='0px';this.dS.left='0px';if(this.line[11][0].charAt(0).toUpperCase()=='I'){zxcimg=document.createElement('IMG');this.d.appendChild(zxcimg);} this.ary=[];if(this.line[0]){this.dS.height=this.line[7]+'px';this.dS.width=this.line[3]+'px';zxcstps=Math.ceil(this.line[6]/this.line[3]);for(zxc0=0;zxc0<zxcstps;zxc0++){this.ary[zxc0]=this.d.cloneNode(true);this.p.appendChild(this.ary[zxc0]);this.ary[zxc0].style.left=(this.line[3]*zxc0)+'px';}} else{this.dS.height=this.line[4]+'px';this.dS.width=this.line[5]+'px';for(zxc0=0;zxc0<Math.ceil(this.line[8]/this.line[4]);zxc0++){this.ary[zxc0]=this.d.cloneNode(true);this.p.appendChild(this.ary[zxc0]);this.ary[zxc0].style.top=(this.line[4]*zxc0)+'px';}} if(this.line[11][0].charAt(0).toUpperCase()=='C'){this.effectary=new Array(zxcstps);zxcGradientColors(this.line[11][1],this.line[11][2],this.effectary);for(zxc1=0;zxc1<this.ary.length;zxc1++){this.ary[zxc1].style.backgroundColor=this.effectary[zxc1];}} if(this.line[11][0].charAt(0).toUpperCase()=='O'){this.effectary=zxcSteps(zxcstps,this.line[11]);for(zxc1=0;zxc1<this.ary.length;zxc1++){this.ary[zxc1].style.backgroundColor=this.line[11][1];zxcOpacity(this.ary[zxc1].style,this.effectary[zxc1]);}} if(this.line[11][0].charAt(0).toUpperCase()=='I'){this.effectary=[];zxcimgcnt=0;for(zxc1=0;zxc1<this.ary.length;zxc1++){if(typeof(this.line[11][1])=='string'){this.ary[zxc1].firstChild.src=this.line[11][1];} else{this.ary[zxc1].firstChild.src=this.line[11][1][zxcimgcnt];zxcimgcnt=(zxcimgcnt+1)%this.line[11][1].length} this.ary[zxc1].firstChild.width=parseInt(this.dS.width);this.ary[zxc1].firstChild.height=parseInt(this.dS.height);}}} function zxcSteps(zxcstps,zxcsary){zxctary=[];for(zxc1=0;zxc1<zxcstps;zxc1++){zxctary[zxc1]=Math.floor(Math.abs((zxcsary[2]-zxcsary[3])/(zxcstps-1))*zxc1+Math.min(zxcsary[2],zxcsary[3]))} if(zxcsary[2]>zxcsary[3]){zxctary=zxctary.reverse();} return zxctary} function zxcOpacity(zxc,zxcop){if(zxcop<0||zxcop>100){return;} if(zxc.MozOpacity!=null){zxc.MozOpacity=(zxcop/100)-.001;} else if(zxc.opacity!=null){zxc.opacity=(zxcop/100)-.001;} else if(zxc.filter!=null){zxc.filter='alpha(opacity='+zxcop+')';} else if(zxc.KHTMLOpacity!=null){zxc.KHTMLOpacity=(zxcop/100)-.001;}} function zxcGradientColors(zxcc1,zxcc2,zxcary){zxclen=zxcary.length;zxcc1=zxcc1.replace('#','');zxcc2=zxcc2.replace('#','');var zxcr=zxcHexToInt(zxcc1.substring(0,2));var zxcg=zxcHexToInt(zxcc1.substring(2,4));var zxcb=zxcHexToInt(zxcc1.substring(4,6));var zxcr2=zxcHexToInt(zxcc2.substring(0,2));var zxcg2=zxcHexToInt(zxcc2.substring(2,4));var zxcb2=zxcHexToInt(zxcc2.substring(4,6));var zxcrstep=Math.round((zxcr2-zxcr)/zxclen);var zxcgstep=Math.round((zxcg2-zxcg)/zxclen);var zxcbstep=Math.round((zxcb2-zxcb)/zxclen);for(zxc0=0;zxc0<zxclen-1;zxc0++){zxcary[zxc0]="#"+zxcIntToHex(zxcr)+zxcIntToHex(zxcg)+zxcIntToHex(zxcb);zxcr+=zxcrstep;zxcg+=zxcgstep;zxcb+=zxcbstep;} zxcary[zxclen-1]='#'+zxcc2;} function zxcIntToHex(zxcn){if(zxcn>255){zxcn=255;} if(zxcn<0){zxcn=0;} var zxcresult=zxcn.toString(16);if(zxcresult.length==1){zxcresult="0"+zxcresult;} return zxcresult;} function zxcHexToInt(zxchex){return parseInt(zxchex,16);} </SCRIPT> </HEAD> <BODY onload="initIG8()"> <div id="v3"><div class="b1"><b></b></div><div class="b2"><b><i><q></q></i></b></div><div class="b3"><b><i></i></b></div><div class="b4"><b></b></div><div class="b5"><b></b></div><div class="text"> <img name="ig8tn" src="002.jpg" width="200px" onmouseover="zxcAddOutLine(this,'toggle',8,'red',3,30);" onmouseout="zxcAddOutLine(this,'toggle',0,'0',0,0);"> <div id="g8box" style="position:absolute; left:50%; top:50%; width:1px; height:1px; font-size:1px; background-color:#000000; z-index:5; border:4px ridge #008000; visibility:hidden" onclick="nextG8Pic(-1)"><img id="g8img"></div> </div><div class="b5"><b></b></div><div class="b4"><b></b></div><div class="b3"><b><i></i></b></div><div class="b2"><b><i><q></q></i></b></div><div class="b1"><b></b></div></div> <div style=" position:absolute; bottom:+30; left:30% "><center><a style="COLOR: #000;font: 80% Verdana,Arial,sans-serif;" href=http://www.03www.su/>Библиотека JAVASCRIPT 1997- 2010 (июль 2010 г.) Дизайн и сопровождение © SE@RCHER</a></center></div></body> </HTML>