Marquee-Scroller

HTML-Einbindung
<!-- Script-Anfang --> <!-- www-java24.net - DIE Javascript - Ressource --> <!-- Diesen Code musst Du in den -head- einbauen --> <style type="text/css"> .content {position:absolute; visibility:hidden; left:0px; top:0px; z-index:100} .backdrop {position:absolute; visibility:hidden; left:0px; top:0px; z-index:99} </style> <script language="javascript"> var boxheight=100; //Background "box" height in pixels. var boxwidth=400; //Background "box" width in pixels. var boxleftpos=300; //Background "box" position, in pixels, from the left edge of the browser window. var boxtoppos=350; //Background "box" position, in pixels, from the top edge of the browser window. var elementwidth=200; //Width of the scrolling element in pixels. var elementheight=35; //Height of the scrolling element in pixels. var repeat=true; //true=repeats over and over - false=one time. var seebox=true; //true=background box is visible - false=background box is hidden. var speed=50; //Delay between animations of scrolling effect in milliseconds (1000 milliseconds=1 second). var pixelstep=3; //amount of pixel "step" per repetition. var scrolltype=1; //1=bounce 2=roll left 3=roll right 4=roll up 5=roll down var scrl, bckgnd, id; var isNS=(navigator.appName=="Netscape"); var _visible='show'; var _hidden='hide'; var _all=''; var _style=''; if(!isNS){ _all='all.'; _style='.style'; _visible='visible'; _hidden='hidden'; } function init(){ clearTimeout(id); scrl=eval('document.'+_all+'scrl'+_style); bckgnd=eval('document.'+_all+'bckgnd'+_style); if(isNS){ bckgnd.moveTo(boxleftpos-6,boxtoppos-6); }else{ bckgnd.pixelLeft=boxleftpos-6; bckgnd.pixelTop=boxtoppos-6; } if(seebox)bckgnd.visibility=_visible; switch(scrolltype){ case 1: setinitpos(boxleftpos,boxtoppos); bouncescroll(true); break; case 2: setinitpos(boxleftpos+boxwidth,boxtoppos); leftscroll(-boxwidth); break; case 3: setinitpos(boxleftpos-elementwidth,boxtoppos); rightscroll(0); break; case 4: setinitpos(boxleftpos,boxtoppos+boxheight); upscroll(-boxheight); break; case 5: setinitpos(boxleftpos,boxtoppos-elementheight); downscroll(elementheight); break; default: alert('Invalid scroll option!'); break; }} function leftscroll(pxloffset){ pxloffset+=pixelstep; if(isNS){ scrl.clip.top=0; scrl.clip.right=boxwidth+pxloffset; scrl.clip.bottom=boxheight; scrl.clip.left=pxloffset; scrl.moveBy(-pixelstep,0); }else{ scrl.clip="rect(0px "+(boxwidth+pxloffset)+"px "+boxheight+"px "+pxloffset+"px)"; scrl.pixelLeft-=pixelstep; } if(repeat&&(pxloffset>elementwidth)){ setinitpos(boxleftpos+boxwidth,boxtoppos); pxloffset=(-boxwidth); } id=setTimeout('leftscroll('+pxloffset+')', speed); } function rightscroll(pxloffset){ pxloffset-=pixelstep; if(isNS){ scrl.clip.top=0; scrl.clip.right=boxwidth+pxloffset; scrl.clip.bottom=boxheight; scrl.clip.left=pxloffset; scrl.moveTo(boxleftpos-pxloffset,scrl.top); }else{ scrl.clip="rect(0px "+(boxwidth+pxloffset)+"px "+boxheight+"px "+pxloffset+"px)"; scrl.pixelLeft=boxleftpos-pxloffset; } if(repeat&&(pxloffset<-boxwidth)){ pxloffset=elementwidth; setinitpos(boxleftpos-elementwidth,boxtoppos); } id=setTimeout('rightscroll('+pxloffset+')', speed); } function bouncescroll(goingright){ if(isNS){ scrl.clip.right=elementwidth; scrl.clip.left=0; scrl.clip.bottom=elementheight; scrl.clip.left=0; if(scrl.left>=(boxwidth-elementwidth+boxleftpos))goingright=false; if(scrl.left<=boxleftpos)goingright=true; (goingright)?scrl.moveTo(scrl.left+pixelstep,scrl.top):scrl.moveTo(scrl.left-pixelstep,scrl.top); }else{ scrl.clip="rect("+0+"px "+elementwidth+"px "+elementheight+"px 0px)"; if(scrl.pixelLeft>=(boxwidth-elementwidth+boxleftpos))goingright=false; if(scrl.pixelLeft<=boxleftpos)goingright=true; (goingright)?scrl.pixelLeft+=pixelstep:scrl.pixelLeft-=pixelstep; } id=setTimeout('bouncescroll('+goingright+')',speed); } function downscroll(pxloffset){ pxloffset-=pixelstep; if(isNS){ scrl.clip.top=pxloffset; scrl.clip.right=boxwidth; scrl.clip.bottom=boxheight+pxloffset; scrl.clip.left=0; scrl.moveTo(boxleftpos,boxtoppos-pxloffset); }else{ scrl.clip="rect("+pxloffset+"px "+boxwidth+"px "+(boxheight+pxloffset)+"px 0px)"; scrl.pixelTop=boxtoppos-pxloffset; } if(repeat&&(pxloffset<-boxheight)){ setinitpos(boxleftpos,boxtoppos-elementheight); pxloffset=elementheight;} id=setTimeout('downscroll('+pxloffset+')', speed); } function upscroll(pxloffset){ pxloffset+=pixelstep; if(isNS){ scrl.clip.top=pxloffset; scrl.clip.right=boxwidth; scrl.clip.bottom=boxheight+pxloffset; scrl.clip.left=0; scrl.moveBy(0,-pixelstep); }else{ scrl.clip="rect("+(pxloffset)+"px "+boxwidth+"px "+(pxloffset+boxheight)+"px 0px)"; scrl.pixelTop-=pixelstep; } if(repeat&&(pxloffset>elementheight)){ setinitpos(boxleftpos,boxtoppos+boxheight); pxloffset=-boxheight; } id=setTimeout('upscroll('+pxloffset+')', speed); } function setinitpos(x,y){ if(isNS){ scrl.clip.top=0; scrl.clip.right=0; scrl.clip.bottom=0; scrl.clip.left=0; scrl.moveTo(x,y); }else{ scrl.clip="rect(0px 0px 0px 0px)"; scrl.pixelTop=y; scrl.pixelLeft=x; } scrl.visibility=_visible; } </script> <!-- Diesen Code musst Du als -eventhandler- in den body-Tag einbauen --> <body onLoad="init()"> <!-- Diesen Code musst Du in den -body- einbauen --> <script language="javascript"> document.write('<div id="bckgnd" class="backdrop"><img src="bdrop.gif" border="3" height="'+(boxheight+8)+'" width="'+(boxwidth+12)+'"></div>');</script>  <div id="scrl" class="content" style="width: 250; height: 31"> <!--START ENTERING HTML TO SCROLL HERE--> Hier kommt der Text z.B. <b>HTML</b><br> Fast alles ist möglich. <!--END HTML TO SCROLL--> <!-- Script-Ende --> <!-- www-java24.net - DIE Javascript - Ressource -->