Just playing
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Stretch Menu</title> <style type="text/css"> body { padding: 0; margin: 0; } #tst1 { width:800px;border:solid black 0px; } #tst2 { width:800px;border:solid black 0px; } .s_menu ul { list-style: none; padding: 0; margin: 0; } .s_menu li { display: inline; float: left; } .s_menu a { color: white; text-decoration: none; font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; } .s_menu a span { display: block; padding: 5px 30px; cursor: pointer; } </style> <script type="text/javascript"> /*<![CDATA[*/ // Basic Element Animator (11-May-2009) // by Vic Phillips http://www.vicsjavascripts.org.uk // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time. // With the ability to scale the effect time on secified minimum/maximum values<br /> // and with three types of progression 'sin' and 'cos' and liner and an optional 'Bounce'. // **** Application Notes // **** The HTML Code // // when moving an element the inline or class rule style position of the element should be assigned as // 'position:relative;' or 'position:absolute;'. // // The element would normally be assigned a unique ID name. // // **** Executing the Effect(Script) // // The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');' // where: // parameter 0 = the mode(see Note 2). (string) // parameter 1 = the unique ID name or element object. (string or element object) // parameter 2 = the start position of the effect. (digits, for opacity minimum 0, maximum 100) // parameter 3 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100) // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds) // parameter 5 = (optional) to scale the effect time on a secified minimum/maximum. (array, see Note 5) // field 0 the minimum. (digits) // field 1 the maximum. (digits) // parameter 6 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner') // 'sin' progression starts fast and ends slow. // 'cos' progression starts slow and ends fast. // // Note 1: The default units(excepting opacity) are 'px'. // Note 2: Examples modes: 'left', 'top', 'width', 'height', 'opacity. // For hyphenated modes, the first character after the hyphen must be upper case, all others lower case. // Note 3: To 'toggle' the effect include '#' in parameter 0. // The first call will set the toggle parameters. // Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect. // Note 4: The function may be re-executed with a different set of parameters (start/finish time or period) // whenever required, say from an onclick/mouseover/out event. // The period parameter will be retained unless re-specified. // Note 5: parameter 5 is of particular use when re-calling the effect // in mid travel to retain an constant rate of progression. // Note 6: parameters 2 and 3 must be different values to execute the script. // // **** Functional Code - NO NEED to Change function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){ if (typeof(obj)=='string'){ obj=document.getElementById(obj); } if (!obj) return; var oop=obj[mde.replace(/\W/g,'')+'oop']; if (oop){ 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){ clearTimeout(this.to); 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(); 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]; this.apply(); if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10); else { this.data[0]=this.data[2]; this.apply(); } } zxcBAnimatorOOP.prototype.apply=function(){ if (isFinite(this.data[0])){ 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]); } } 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; } /*]]>*/ </script> <script type="text/javascript"> <!-- function zxcStretch(id,max,ms){ var obj=document.getElementById(id); var lis=obj.getElementsByTagName('LI') this.ary=[]; this.max=max; obj.style.width=max+'px'; for (var w,z0=0;z0<lis.length;z0++){ w=lis[z0].offsetWidth; this.ary[z0]=[zxcBAnimator('width',lis[z0],w,w,10),w]; zxcAddOOPEvt(this,lis[z0],'click','Stretch',z0); this.max-=w; } this.ms=ms||1000; this.lst=false; } zxcStretch.prototype.Stretch=function(nu,e,ms){ if (this.lst) this.lst[0].update([this.lst[0].data[0],this.lst[1]],ms||this.ms); this.lst=this.ary[nu]; this.lst[0].update([this.lst[0].data[0],this.lst[1]+this.max],ms||this.ms); } function zxcAddOOPEvt(oop,o,t,f,p){ if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false); else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); }); else { var prev=o['on'+t]; if (prev) o['on'+t]=function(e){ prev(e); oop[f](p,e); }; else o['on'+t]=o[f]; } } //--> </script> <script type="text/javascript"> <!-- var S1,S2; function Init(){ S1=new zxcStretch('tst1',800,1000); S1.Stretch(0,false,10); S2=new zxcStretch('tst2',850,500); } //--> </script> </head> <body onload="Init();" > <div class="s_menu" id="tst1" > <ul> <li style="background-color: violet;"><a ><span>Baltimore</span></a></li> <li style="background-color: yellow;" class="s_menu_f"><a ><span>Newark</span></a></li> <li style="background-color: blue;"><a ><span>Memphis</span></a></li> <li style="background-color: orange;"><a ><span>San Antonio</span></a></li> <li style="background-color: purple;"><a ><span>Miami</span></a></li> <li style="background-color: gold;"><a ><span>Bronx</span></a></li> </ul> </div> <br>You can have multiple menus!<br> <div class="s_menu" id="tst2"> <ul> <li style="background-color: violet;"><a ><span>Baltimore</span></a></li> <li style="background-color: yellow;" class="s_menu_f"><a ><span>Newark</span></a></li> <li style="background-color: orange;"><a ><span>San Antonio</span></a></li> <li style="background-color: purple;"><a ><span>Miami</span></a></li> <li style="background-color: gold;"><a ><span>Bronx</span></a></li> </ul> </div> </body> </html>
CSS Codes
Reply With Quote
Bookmarks