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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="imagetoolbar" content="no" />
<title>Блок при наведении с анимационным обрамлением</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
.test{
 position:absolute;overflow:hidden;width:200px;top:20px;height:240px;background-Color:#FFFFCC;text-Align:center;font-Size:12px;border:solid black 1px;
}
#tst1 {
 left:120px;
}
.left {
 position:absolute;display:none;width:10px;height:240px;top:0px;background-Color:#FFCC66;border-Right:solid black 1px;cursor:default;
}
.right {
 position:absolute;display:none;width:10px;height:240px;top:0px;background-Color:#FFCC66;border-Left:solid black 1px;cursor:default;
}
.up {
 position:absolute;display:none;width:200px;height:10px;left:0px;top:-500;background-Color:#FFCC66;border-Top:solid black 1px;cursor:default;
}
.down {
 position:absolute;display:none;width:200px;height:10px;left:0px;background-Color:#FFCC66;border-Bottom:solid black 1px;
}
.ssleft {
 position:absolute;display:none;z-Index:101;width:10px;height:43px;top:115px;
}
.ssleft DIV {
 position:relative;top:5px;cursor:pointer;
}
.ssright {
 position:absolute;display:none;z-Index:101;width:30px;height:43px;top:115px;
}
.ssright DIV {
 position:relative;top:5px;cursor:pointer;
}
.ssdown {
 position:absolute;z-Index:101;display:none;width:210px;height:30px;left:0px;
}
.ssdown DIV {
 position:relative;top:5px;
}
.sstext {
 position:absolute;left:5px;top:2px;width:298px;height:20px;color:#CC6633;background-Color:#FFFFCC;border:solid #CC6633 1px;text-Align:center;font-Size:16px;
}
.ss2down {
 position:absolute;z-Index:101;display:none;width:110px;height:30px;left:0px;
 opacity: .3;filter: alpha(opacity=30);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
.ss2up {
 position:absolute;z-Index:101;display:none;width:210px;height:20px;left:0px;text-Align:center;background-Color:#CCFFFF;
 opacity: .3;filter: alpha(opacity=30);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
.ss2up DIV {
 position:relative;left:68px;top:3px;float:left;margin-Left:5px;
}
/*]]>*/
</style>
<script  type="text/javascript">
var zxcToDay=new Date();function siteTitle(e,args){zxcES(document.getElementById('TitleRed'),{left:args[1]+'px'},null,args[0]);zxcES(document.getElementById('TitleBlack'),{left:args[1]+1+'px'},null,args[0]);if(args[2])zxcES(document.getElementById('header'),{height:args[2]+'px'});if(args[3])zxcES(document.getElementById('content1'),{height:args[3]+'px'});if(args[4])zxcES(document.getElementById('content2'),{height:args[4]+'px'});}
function siteTabsInit(e,args){var oop=new siteTabs(args);}
function siteTabs(args){var oop=this;this.mse=[args[1],args[1]+' '+args[4]];this.obj=document.getElementById(args[0]);this.tabs=zxcByClassName(args[1],this.obj,'DIV');this.items=zxcByClassName(args[2],this.obj,'DIV');this.nu=args[3]||0;this.nu=0;for(var z0=0;z0<this.tabs.length;z0++){zxcES(this.tabs[z0],{zIndex:(z0!=this.nu?'0':'2')});zxcES(this.items[z0],{zIndex:(z0!=this.nu?'0':'1')});this.tabs[z0].onclick=function(){oop.cng(this);}
this.tabs[z0].onmouseover=function(){this.className=oop.mse[1];}
this.tabs[z0].onmouseout=function(){if(this!=oop.lst){this.className=oop.mse[0];}}
var txt=zxcES('DIV',{marginLeft:'10px'},this.tabs[z0],args[5][z0]);txt.className=args[3];}
this.lst=this.tabs[this.nu];this.lst.className=this.mse[1];this.lstitem=this.items[this.nu];this.obj.getElementsByTagName('INPUT')[0].onclick=function(){var ta=oop.lstitem.getElementsByTagName('TEXTAREA')[0];if(ta)ta.select();}
this.but=this.obj.getElementsByTagName('INPUT')[0];this.cng(this.lst);}
siteTabs.prototype.cng=function(tab){this.lst.className=this.mse[0];zxcES(this.lst,{zIndex:'0'});zxcES(this.lstitem,{zIndex:'0'});for(var z0=0;z0<this.tabs.length;z0++){if(this.tabs[z0]==tab){this.lst=this.tabs[z0];this.lstitem=this.items[z0];break;}}
zxcES(this.lst,{zIndex:'2'});zxcES(this.lstitem,{zIndex:'1'});zxcES(this.but,{visibility:(this.lstitem.getElementsByTagName('TEXTAREA')[0]?'visible':'hidden')});this.lst.className=this.mse[1];}
function zxcByClassName(nme,el,tag){if(typeof(el)=='string')el=document.getElementById(el);el=el||document;for(var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0;z0<els.length;z0++){if(reg.test(els[z0].className))ary.push(els[z0]);}
return ary;}
function zxcSV(obj,par){if(obj.currentStyle)return obj.currentStyle[par.replace(/-/g,'')];return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());}
function zxcSVInt(obj,par){if(obj.currentStyle)return parseInt(obj.currentStyle[par.replace(/-/g,'')]);return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));}
function zxcEventAdd(o,f,e,p){if(o.addEventListener){o.addEventListener(e,function(ev){return o[f](ev,p);},false);}
else if(o.attachEvent){o.attachEvent('on'+e,function(ev){return o[f](ev,p);});}
else{var prev=o['on'+e];if(prev){o['on'+e]=function(ev){prev(ev);o[f](ev,p);};}
else{o['on'+e]=o[f];}}}
function zxcAddEvt(obj,fun,ev,p){if(obj['zxc'+fun+ev])return;obj['zxc'+fun+ev]=window[fun];zxcEventAdd(obj,'zxc'+fun+ev,ev,p);}
function zxcES(ele,style,par,txt){if(typeof(ele)=='string')ele=document.createElement(ele);for(key in style)ele.style[key]=style[key];if(par)par.appendChild(ele);if(txt)ele.appendChild(document.createTextNode(txt));return ele;}
function zxcPos(obj){var rtn=[obj.offsetLeft,obj.offsetTop];while(obj.offsetParent!=null){var objp=obj.offsetParent;rtn[0]+=objp.offsetLeft-objp.scrollLeft;rtn[1]+=objp.offsetTop-objp.scrollTop;obj=objp;}
return rtn;}
function zxcWWHS(){if(window.innerHeight)return[window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];else if(document.documentElement.clientHeight)return[document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];return[document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];}
function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){if(typeof(obj)=='string'){obj=document.getElementById(obj);}
if(!obj||(!srt&&!fin))return;var oop=obj[mde.replace(/\W/g,'')+'oop'];if(oop){clearTimeout(oop.to);if(oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#'))oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);else oop.update([srt,fin],ms,scale,curve);}
else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);return oop;}
function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){this.srtfin=[srt,fin];this.to=null;this.obj=obj;this.mde=mde.replace(/\W/g,'');this.update([srt,fin],ms,scale,curve);}
zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){this.time=ms||this.time||2000;this.data=[srtfin[0],srtfin[0],srtfin[1]];this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));this.ms=this.mS;this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';this.inc=Math.PI/(2*this.mS);this.srttime=new Date().getTime();if(this.data[1]!=this.data[2])this.cng();}
zxcBAnimatorOOP.prototype.cng=function(){this.ms=new Date().getTime()-this.srttime;this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];if(this.mde!='left'&&this.mde!='top'&&this.data[0]<0)this.data[0]=0;if(this.mde!='opacity')this.obj.style[this.mde]=this.data[0]+'px';else zxcOpacity(this.obj,this.data[0]);if(this.ms<this.mS)this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);else{this.data[0]=this.data[2];if(this.mde!='opacity')this.obj.style[this.mde]=this.data[0]+'px';else zxcOpacity(this.obj,this.data[0]);}}
function zxcOpacity(obj,opc){if(opc<0||opc>100)return;obj.style.filter='alpha(opacity='+opc+')';obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;}
function zxcSlidePanel(mde,obj,cls,inn,out,ms,sc,rev){obj=typeof(obj)=='string'?document.getElementById(obj):obj;if(obj){var panel=zxcSPClassName(cls,obj)[0];if(panel){var oop=new zxcSPOOP(mde,obj,panel,inn,out,ms,sc,rev);return oop;}}}
function zxcSPOOP(mde,obj,panel,inn,out,ms,sc,rev){this.obj=obj;this.panel=panel;this.panel.zxc=true;this.sincos=sc&&sc.charAt?sc.toLowerCase():false;this.ms=ms||1000;mde=mde.charAt(0).toUpperCase();this.mde=mde=='L'||mde=='R'?['left','width']:['top','height'];this.mm=mde=='L'||mde=='T'?[0,-zxcSPWH(this.panel,this.mde[1])-5]:[zxcSPWH(this.obj,this.mde[1])-zxcSPWH(this.panel,this.mde[1]),zxcSPWH(this.obj,this.mde[1])+5];if(rev){this.mm.reverse();this.panel.style.display='block';}
zxcBAnimator(this.mde[0],this.panel,this.mm[0],this.mm[1],1);this.oop=this.panel[this.mde[0]+'oop'];this.io=false;if(inn=='click'){this.addevt(this.obj,inn,'slideclick');}
else if(inn){this.addevt(this.obj,inn,'slidein');if(out)this.addevt(this.obj,out,'slideout');}}
zxcSPOOP.prototype.slideclick=function(e){if((!e||this.ckevt(e,this.panel))&&this.oop.data[0]!=this.mm[this.io?1:0])this.slide(this.mm[this.io?1:0]);}
zxcSPOOP.prototype.slidein=function(e){if((!e||this.ckevt(e,this.obj))&&this.oop.data[0]!=this.mm[0])this.slide(this.mm[0]);}
zxcSPOOP.prototype.slideout=function(e){if((!e||this.ckevt(e,this.obj))&&this.oop.data[0]!=this.mm[1])this.slide(this.mm[1]);}
zxcSPOOP.prototype.slide=function(fin){zxcBAnimator(this.mde[0],this.panel,this.oop.data[0],fin,this.ms,this.mm,this.sincos);this.io=!this.io;this.panel.style.display='block';}
zxcSPOOP.prototype.ckevt=function(e,p){var eobj;if(!e)var e=window.event;e.cancelBubble=true;if(e.stopPropagation)e.stopPropagation();if(e.target)eobj=e.target;else if(e.srcElement)eobj=e.srcElement;if(eobj.nodeType==3)eobj=eobj.parentNode;if(e.type!='click')eobj=(e.relatedTarget)?e.relatedTarget:(e.type=='mouseout')?e.toElement:e.fromElement;if(!eobj||eobj==p||e.type=='click'&&eobj.zxc)return false;while(eobj.parentNode){if(eobj==p||e.type=='click'&&eobj.zxc)return false;eobj=eobj.parentNode;}
return true;}
zxcSPOOP.prototype.addevt=function(o,t,f){var oop=this;if(o.addEventListener)o.addEventListener(t,function(e){return oop[f](e);},false);else if(o.attachEvent)o.attachEvent('on'+t,function(e){return oop[f](e);});else{var prev=o['on'+t];if(prev)o['on'+t]=function(e){prev(e);oop[f](e);};else o['on'+t]=o[f];}}
function zxcSPClassName(nme,el,tag){if(typeof(el)=='string')el=document.getElementById(el);el=el||document;for(var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0;z0<els.length;z0++){if(reg.test(els[z0].className))ary.push(els[z0]);}
return ary;}
function zxcSPWH(obj,par){if(obj.currentStyle)return parseInt(obj.currentStyle[par]);return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par));}
function Init(){zxcSlidePanel('left','tst1','left','mouseover','mouseout',1000,'sin');zxcSlidePanel('right','tst1','right','mouseover','mouseout',1000,'sin');zxcSlidePanel('bottom','tst1','up','mouseover','mouseout',1000,'sin');zxcSlidePanel('top','tst1','down','mouseover','mouseout',1000,'sin');toppanel2.panel.appendChild(SS2.display);}
var toppanel1,toppanel2;var pnParth='http://www.03www.ru/';zxcAddEvt(window,'siteDate','load');zxcAddEvt(window,'siteTitle','load',['Slide Panels',330,150,380,520]);zxcAddEvt(window,'siteTabsInit','load',['tab1','tab','tabitem','tabtxt','tabactive',['Comments','Code','CSS','HTML','The Slide Show','Integration']]);zxcAddEvt(window,'pnInitSearchPanel','load',['header',10,10]);zxcAddEvt(window,'Init','load');
</script>
</head>
<body>
<div id="tst1" class="test">
<img src="http://www.03www.su/pic/01.jpg" width=200px alt="">
<div class="left"></div><div class="right"></div><div class="up"></div><div class="down"></div>
</div>

</body>  
</html>