[Beschreibung]
Horizontale Navigationsleiste mit animiertem Zeiger
[Kompatibilität]
[Code]
A { FONT: bold 10px Verdana, Tahoma, Arial; COLOR: #808080; TEXT-DECORATION: none } A:hover { COLOR: #ffffff; TEXT-DECORATION: none } A:active { COLOR: #808080; TEXT-DECORATION: none } TD { FONT-WEIGHT: bolder }
</STYLE> <script language="JavaScript"> <!-- // Browsercheck function brwcheck() { this.ver=navigator.appVersion this.agent=navigator.userAgent this.dom=document.getElementById?1:0 this.opera5=this.agent.indexOf("Opera 5")>-1 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; this.ie4=(document.all && !this.dom && !this.opera5)?1:0; this.ie=this.ie4||this.ie5||this.ie6 this.mac=this.agent.indexOf("Mac")>-1 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5) return this } var bw=new brwcheck()
numItems=10 //avzahl der Links circleXstart=0 // X startposition des Zeigers YYY=0 // Y startposition des Zeigers circlePXspeed=5 //Anzahl der Pixel die der Zeiger bewegt wird per timeout circleTspeed=10 // Geschwindigkeit circleStay=1
/*************************** Cross-browser object Abschnitt... ***************************/ function makeObj(obj,nest,x,y){nest=(!nest) ? "":'document.'+nest+'.' this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; this.evnt=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?this.css:0; this.showIt=b_showIt; this.moveIt=b_moveIt; this.slide=b_slide; this.slideIt=b_slideIt; this.obj = obj + "Object"; eval(this.obj + "=this"); return this} function b_showIt(){this.css.visibility="visible"} function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x;this.css.top=this.y} function b_slideIt(endx,endy,inc,speed,fn,wh) { if (!this.slideactive) {var distx = endx - this.x;var disty = endy - this.y var num = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2))/inc var dx = distx/num;var dy = disty/num; this.slideactive = 1; this.slide(dx,dy,endx,endy,speed,fn,wh)}} function b_slide(dx,dy,endx,endy,speed,fn,wh) { if (!fn) fn = null; if(!wh) wh=null if (this.slideactive && (Math.floor(Math.abs(dx))<Math.floor(Math.abs(endx-this.x)) || Math.floor(Math.abs(dy))<Math.floor(Math.abs(endy-this.y)))) { this.moveIt(this.x+dx,this.y+dy); eval(wh) slidTim=setTimeout(this.obj+".slide("+dx+","+dy+","+endx+","+endy+","+speed+",'"+fn+"','"+wh+"')",speed) }else{this.slideactive = 0;this.moveIt(endx,endy);eval(fn)}}
/***************************************************************************************** Die init Function. Hier kann man einstellen, wo der Zeiger für jeden Button anhält (in PX) ******************************************************************************************/ function slideball_init(){ But=new Array() for(i=0;i<=numItems;i++){ But[i]=new makeObj('divButton'+i) } Zeiger=new makeObj('divZeiger') But[0].moveIt(59,YYY) But[1].moveIt(122,YYY) But[2].moveIt(187,YYY) But[3].moveIt(250,YYY) But[4].moveIt(315,YYY) But[5].moveIt(379,YYY) But[6].moveIt(442,YYY) But[7].moveIt(506,YYY) But[8].moveIt(572,YYY) But[9].moveIt(636,YYY) But[10].moveIt(698,YYY) Zeiger.moveIt(circleXstart,YYY) for(i=0;i<=numItems;i++){ But[i].showIt() } }
var slidTim=100; var active=-1 function sbmover(num){ clearTimeout(slidTim) Zeiger.slideactive=false Zeiger.slideIt(But[num].x,But[num].y,circlePXspeed,circleTspeed) } function sbmout(num){ clearTimeout(slidTim) Zeiger.slideactive=false if(active>-1 && circleStay)Zeiger.slideIt(But[active].x,But[active].y,circlePXspeed,circleTspeed) else Zeiger.slideIt(circleXstart,YYY,circlePXspeed,circleTspeed) } function changeListing(num){ active=num }
if(bw.bw) onload=slideball_init; --> </script>
Micha Doe
Kopieren Sie bitte den Code