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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Линк при наведении постепенно подчеркивается бегущей линией</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
function ImageExpander(oThumb,sImgSrc)
{this.oThumb=oThumb;this.oThumb.expander=this;this.oThumb.onclick=function(){this.expander.expand();}
this.smallWidth=oThumb.offsetWidth;this.smallHeight=oThumb.offsetHeight;this.bExpand=true;this.bTicks=false;if(!window.aImageExpanders)
{window.aImageExpanders=new Array();}
window.aImageExpanders.push(this);this.oImg=new Image();this.oImg.expander=this;this.oImg.onload=function(){this.expander.onload();}
this.oImg.src=sImgSrc;}
ImageExpander.prototype.onload=function()
{this.oDiv=document.createElement("div");document.body.appendChild(this.oDiv);this.oDiv.appendChild(this.oImg);this.oDiv.style.position="absolute";this.oDiv.expander=this;this.oDiv.onclick=function(){this.expander.toggle();};this.oImg.title="Click to reduce.";this.bigWidth=this.oImg.width;this.bigHeight=this.oImg.height;if(this.bExpand)
{this.expand();}
else
{this.oDiv.style.visibility="hidden";this.oImg.style.visibility="hidden";}}
ImageExpander.prototype.toggle=function()
{this.bExpand=!this.bExpand;if(this.bExpand)
{for(var i in window.aImageExpanders)
if(window.aImageExpanders[i]!==this)
window.aImageExpanders[i].reduce();}}
ImageExpander.prototype.expand=function()
{this.bExpand=true;for(var i in window.aImageExpanders)
if(window.aImageExpanders[i]!==this)
window.aImageExpanders[i].reduce();if(!this.oDiv)return;this.oThumb.style.visibility="hidden";this.x=this.oThumb.offsetLeft;this.y=this.oThumb.offsetTop;this.w=this.oThumb.clientWidth;this.h=this.oThumb.clientHeight;this.oDiv.style.left=this.x+"px";this.oDiv.style.top=this.y+"px";this.oImg.style.width=this.w+"px";this.oImg.style.height=this.h+"px";this.oDiv.style.visibility="visible";this.oImg.style.visibility="visible";if(!this.bTicks)
{this.bTicks=true;var pThis=this;window.setTimeout(function(){pThis.tick();},25);}}
ImageExpander.prototype.reduce=function()
{this.bExpand=false;}
ImageExpander.prototype.tick=function()
{var cw=document.body.clientWidth;var ch=document.body.clientHeight;var cx=document.body.scrollLeft+cw/2;var cy=document.body.scrollTop+ch/2;var tw,th,tx,ty;if(this.bExpand)
{tw=this.bigWidth;th=this.bigHeight;if(tw>cw)
{th*=cw/tw;tw=cw;}
if(th>ch)
{tw*=ch/th;th=ch;}
tx=cx-tw/2;ty=cy-th/2;}
else
{tw=this.smallWidth;th=this.smallHeight;tx=this.oThumb.offsetLeft;ty=this.oThumb.offsetTop;}
var nHit=0;var fMove=function(n,tn)
{var dn=tn-n;if(Math.abs(dn)<3)
{nHit++;return tn;}
else
{return n+dn/10;}}
this.x=fMove(this.x,tx);this.y=fMove(this.y,ty);this.w=fMove(this.w,tw);this.h=fMove(this.h,th);this.oDiv.style.left=this.x+"px";this.oDiv.style.top=this.y+"px";this.oImg.style.width=this.w+"px";this.oImg.style.height=this.h+"px";if(!this.bExpand&&(nHit==4))
{this.oImg.style.visibility="hidden";this.oDiv.style.visibility="hidden";this.oThumb.style.visibility="visible";this.bTicks=false;}
if(this.bTicks)
{var pThis=this;window.setTimeout(function(){pThis.tick();},25);}}
</script>
</head>
<body  bgColor="#f8cd76">
<p>
<a  onmouseover="zxcAddUnderLine(this,'toggle',8,'red',10,3,['C','#FF0000','#21ed4f']);" onmouseout="zxcAddUnderLine(this);" onClick="new ImageExpander(this, '00002.jpg');"><img src="http://www.03www.su/pic/002.jpg" width="200" alt=""></a>
</p>
<script type="text/javascript">
var zxcBdy;var zxcCnt=0;function zxcAddUnderLine(){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=zxcAddUnderLine.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;}
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];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.points=[];this.make=[];zxcCnt++;this.line=[zxcarg[3],zxcarg[4],zxcarg[5],this.wd+zxcarg[2]*2,zxcarg[2],this.lt-zxcarg[2],this.tp+this.ht,zxcarg[6]];}
zxcOOP.prototype.makeline=function(){this.p=zxcPnt.cloneNode(false);this.points[this.lcnt]=this.p;if(this.line[7]&&this.effects){this.effects();}
this.pS=this.p.style;this.pS.width='0px';this.pS.height=this.line[4]+'px';this.pS.left=this.line[5]+'px';this.pS.top=this.line[6]+'px';this.pS.backgroundColor=this.line[0];this.cnt=0;zxcBdy.appendChild(this.p);this.replaceline();}
zxcOOP.prototype.replaceline=function(){this.pS.width=(parseInt(this.pS.width)+this.line[2])+'px';this.fill();this.cnt++;if(parseInt(this.pS.width)<this.line[3]){this.setTimeOut("replaceline();",this.line[1]);}
else{this.pS.width=(this.line[3])+'px';this.cnt--;}}
zxcOOP.prototype.removeline=function(){this.cnt--;this.fill();this.pS.width=(parseInt(this.pS.width)-this.line[2])+'px';if(parseInt(this.pS.width)>this.line[2]){this.setTimeOut("removeline();",this.line[1]);}
else{this.pS.width='0px';this.cnt++;}}
zxcOOP.prototype.linetoggle=function(){if(this.obj.make){this.replaceline();}
else{this.removeline();}}
zxcOOP.prototype.setTimeOut=function(zxcf,zxcd){this.obj.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);}
zxcOOP.prototype.effects=function(){this.d=zxcPnt.cloneNode(false);this.dS=this.d.style;this.dS.top='0px';this.dS.left='0px';this.ary=[];if(this.line[7][0].charAt(0).toUpperCase()=='I'){zxcimg=document.createElement('IMG');this.d.appendChild(zxcimg);}
this.dS.height=this.line[4]+'px';this.dS.width=this.line[2]+'px';zxcstps=Math.ceil(this.line[3]/this.line[2]);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[2]*zxc0)+'px';}
if(this.line[7][0].charAt(0).toUpperCase()=='O'){this.line[7][0]='O';this.effectary=zxcSteps(zxcstps,this.line[7]);for(zxc1=0;zxc1<this.ary.length;zxc1++){this.ary[zxc1].style.backgroundColor=this.line[7][1];}}
if(this.line[7][0].charAt(0).toUpperCase()=='C'){this.line[7][0]='C';this.effectary=new Array(zxcstps);zxcGradientColors(this.line[7][1],this.line[7][2],this.effectary);}
if(this.line[7][0].charAt(0).toUpperCase()=='I'){this.effectary=[];zxcimgcnt=0;for(zxc1=0;zxc1<this.ary.length;zxc1++){if(typeof(this.line[7][1])=='string'){this.ary[zxc1].firstChild.src=this.line[7][1];}
else{this.ary[zxc1].firstChild.src=this.line[7][1][zxcimgcnt];zxcimgcnt=(zxcimgcnt+1)%this.line[7][1].length}
this.ary[zxc1].firstChild.width=parseInt(this.dS.width);this.ary[zxc1].firstChild.height=parseInt(this.dS.height);}}}
zxcOOP.prototype.fill=function(){for(zxc1=0;zxc1<=this.cnt;zxc1++){if(this.p.childNodes[zxc1]&&this.effectary[zxc1]){this.s=this.p.childNodes[zxc1].style;this.eft=this.effectary[(this.effectary.length-this.cnt+zxc1-1)];if(this.line[7][0]=='O'){zxcOpacity(this.s,this.eft);}
if(this.line[7][0]=='C'){this.s.backgroundColor=this.eft;}}}}
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;}
var zxcresult=zxcn.toString(16);if(zxcresult.length==1){zxcresult="0"+zxcresult;}
return zxcresult;}
function zxcHexToInt(zxchex){return parseInt(zxchex,16);}
</script>
</body>  
</html>