Javascript  »  Animationen  »  yugop-Scroller

zur Übersicht

Kategorie	Animationen
Bezeichnung	yugop-Scroller
ScriptDemo	Neues Fenster für Demo öffnen
Statistik	24413 Aufrufe davon 2x gestern
Keine Beschreibung vorhanden.
Javascript-Quellcode  (einfach markieren, kopieren und lokal abspeichern) <style type="text/css"> <!-- body { overflow-x: hidden; } //overflow-y: hidden //--> </style> <SCRIPT> var tricky=false; var agt = navigator.userAgent.toLowerCase(); if(navigator.platform != "MacPPC") isMac=false; else isMac=true; var cup1=0; var cup2=0; var lay1wide; var lay2wide; var lay3wide; var lay4wide; var totalwidea; var totalwideb; var cliphw; var canwego1=false; var canwego2=false; var arewethere1=false; var arewethere2=false; var mX=0; var mY=0; ns4 = (document.layers)? true:false; function imHere() { if (parent.parent.frames["mainmenu"]) if (parent.parent.frames["mainmenu"].imloaded) parent.parent.frames["mainmenu"].gonow(4); }; function switchImg(what,newImg) { document.images[what].src = 'gifs/' + newImg; } function init(num) { if (ns4) {lay1wide = document.layers['box1'].document.width; lay2wide = document.layers['box2'].document.width; lay3wide = document.layers['box3'].document.width; lay4wide = document.layers['box4'].document.width;} else {lay1wide=document.all['box1'].offsetWidth; lay2wide=document.all['box2'].offsetWidth; lay3wide=document.all['box3'].offsetWidth; lay4wide=document.all['box4'].offsetWidth;} totalwidea = lay1wide+lay2wide; totalwideb = lay3wide+lay4wide; cliphw=num; if ((lay1wide>=cliphw)&&(lay2wide>=cliphw)) canwego1=true; if ((lay3wide>=cliphw)&&(lay4wide>=cliphw)) canwego2=true; } function getAbsOffset(id, box, deter){ var offY; var offX; var myEl; if (ns4) { offY = document.layers[box].document.images[id].y - 1 + document.layers[box].sup; offX = document.layers[box].document.images[id].x - 1 + document.layers[box].left; } else { myEl = document.all[id]; offY = myEl.offsetsup; offX = myEl.offsetLeft; if (isMac) while(myEl.parentElement != null){ myEl = myEl.parentElement; if (!isNaN(myEl.offsetsup)) offY += myEl.offsetsup; if (!isNaN(myEl.offsetLeft)) offX += myEl.offsetLeft; } else while(myEl.offsetParent != null){ myEl = myEl.offsetParent; if (!isNaN(myEl.offsetsup)) offY += myEl.offsetsup; if (!isNaN(myEl.offsetLeft)) offX += myEl.offsetLeft; } } if (deter=="y") return offY; else return offX; } function movethis(x,boxa,boxb,totalwide,layawide,laybwide,cupb,space) { x=Math.round(x); cupb+=x; if (ns4) {document.layers[boxa].moveBy(x,0); if (cupb>layawide) {document.layers[boxa].moveBy(-totalwide,0); cupb-=layawide*2; } if (cupb<-layawide) {document.layers[boxa].moveBy(totalwide,0); cupb+=layawide*2; } if (cupb>0) {document.layers[boxa].clip.left=0; document.layers[boxa].clip.right=cliphw-cupb; document.layers[boxb].moveTo(cupb-laybwide,space); document.layers[boxb].clip.left=(layawide-cupb); document.layers[boxb].clip.right=(layawide-cupb+cliphw);} else {document.layers[boxa].clip.left=-cupb; if ((cupb+layawide)<cliphw) document.layers[boxa].clip.right=layawide; else document.layers[boxa].clip.right=cliphw-cupb; document.layers[boxb].moveTo(cupb+laybwide,space); document.layers[boxb].clip.left=(-laybwide-cupb); document.layers[boxb].clip.right=(-laybwide-cupb+cliphw);} } else { document.all[boxa].style.pixelLeft+=x; if (cupb>layawide) {document.all[boxa].style.pixelLeft-=totalwide; cupb-=totalwide; } if (cupb<-layawide) {document.all[boxa].style.pixelLeft+=totalwide; cupb+=totalwide;} if (cupb>0) { document.all[boxa].style.clip = "rect(0,"+(cliphw-cupb)+",57,0)"; document.all[boxb].style.pixelLeft = cupb-laybwide; document.all[boxb].style.clip = "rect(0,"+(layawide-cupb+cliphw)+",57,"+(layawide-cupb)+")";} else { if ((cupb+layawide)<cliphw) document.all[boxa].style.clip = "rect(0,"+(layawide)+",57,"+(-cupb)+")"; else document.all[boxa].style.clip ="rect(0,"+(cliphw-cupb)+",57,"+(-cupb)+")"; document.all[boxb].style.pixelLeft = cupb+laybwide; document.all[boxb].style.clip = "rect(0, "+(-laybwide-cupb+cliphw)+",57,"+(-laybwide-cupb)+")";} } return(cupb); } function mouGim() { if (ns4) {window.captureEvents(Event.MOUSEMOVE); window.onMouseMove = MouseMove;} else {document.onmousemove = MouseMove;}} function MouseMove(e) { if (ns4) {mX = e.pageX; mY = e.pageY;} else {mX = eval(event.clientX); mY = eval(event.clientY);}} function goNow() {ty=0; if (mX<50) {ty = 1;} else if (mX<150) {ty = 4;} else if (mX<250) {ty = 3;} else if (mX<350) {ty = 2;} else if (mX<375) {ty = 1;} else if (mX<400) {ty = -1;} else if (mX<500) {ty = -2;} else if (mX<600) {ty = -3;} else if (mX<700) {ty = -4;} else {ty = -5;} cup1 = movethis(ty,'box1','box2',totalwidea,lay1wide,lay2wide,cup1,16); if (tricky) {cup2 = movethis(ty,'box3','box4',totalwideb,lay3wide,lay4wide,cup2,80);} else cup2 = movethis(-ty*2,'box3','box4',totalwideb,lay3wide,lay4wide,cup2,80); setTimeout('goNow()',10);} function yawn(imgname,boxname,num) {tricky=true; var newcup=getAbsOffset(imgname,boxname,'x')-(getAbsOffset(num,'box3','x')-cup2); var ty=cup2-newcup; cup2 = movethis(-ty,'box3','box4',totalwideb,lay3wide,lay4wide,cup2,80); } function yeah() {tricky=false;} </SCRIPT> <BODY onload=mouGim();init(795);goNow();imHere();> <DIV id=box1 style="CLIP: rect(0px 795px 57px 0px); HEIGHT: 57px; LEFT: 0px; POSITION: absolute; top: 16px; WIDTH: 795px; Z-INDEX: 2"> <TABLE border=0 cellPadding=0 cellSpacing=0 height=56> <TR vAlign=center> <TD><IMG height=1 name=sup01 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup01','box1','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup02 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup02','box1','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup03 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup03','box1','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup04 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup04','box1','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup05 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup05','box1','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup06 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup06','box1','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup07 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup07','box1','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup08 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup08','box1','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup09 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup09','box1','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup10 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup10','box1','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup11 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup11','box1','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup12 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup12','box1','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> </TR></TABLE> </DIV> <DIV id=box2 style="CLIP: rect(0px 0px 57px 0px); HEIGHT: 57px; LEFT: 795px; POSITION: absolute; top: 16px; WIDTH: 397px; Z-INDEX: 1"> <TABLE border=0 cellPadding=0 cellSpacing=0> <TR vAlign=center> <TD><IMG height=1 name=sup13 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup13','box2','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup14 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup14','box2','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup15 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup15','box2','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup16 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup16','box2','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup17 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup17','box2','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup18 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup18','box2','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup19 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup19','box2','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup20 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup20','box2','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup21 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup21','box2','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup22 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup22','box2','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup23 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup23','box2','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> <TD><IMG height=1 name=sup24 src="gfx/b.gif" width=56></TD> <TD><A href="#" onmouseout=yeah() onmouseover="yawn('sup24','box2','hid01');status=' ';return true;"><img src="gfx/daumen.gif" border=0 height=57 width=67></A></TD> </TR></TABLE> </DIV> <DIV id=box3 style="CLIP: rect(0px 795px 57px 0px); HEIGHT: 57px; LEFT: 0px; POSITION: absolute; top: 80px; WIDTH: 795px; Z-INDEX: 2"><IMG height=1 name=hid01 src="gfx/b.gif" width=1></DIV> <DIV id=box4 style="CLIP: rect(0px 0px 57px 0px); HEIGHT: 57px; LEFT: 795px; POSITION: absolute; top: 80px; WIDTH: 795px; Z-INDEX: 1"><IMG height=1 name=hid01 src="gfx/b.gif" width=1></DIV>

Kommentare zu yugop-Scroller

1 Kommentar(e) vorhanden / Anzeige der neuesten 5

am 30.09.2003 um 18:13 Uhr von Alexander Hamann
Hi War genau das was ich gesucht habe. Schade das es nur im IE funktioniert. -> Mozilla... 


Alle Kommentare anzeigen   -   Kommentar hinzufügen