Impossible?

matthiasschnueriger

matthiasschnueriger

Erfahrenes Mitglied
Langsam aber sicher possible :-)

Hallo!

Ich habe ein geiles Feature entdeckt, hier.
Wenn Ihr jetzt auf ein Menü klickt, läuft nachher so ne Art Bildlaufleiste...

Leider ist das mit Flash gemacht, ich würde aber eine Javascript-Version
bevorzugen, aber auch mit "Hin-und-her-scroll-Möglichkeit" :-)

Gibt es das überhaupt?

Danke und Gruss, Matthias
 
Zuletzt bearbeitet:
Gibt es, hier im Forum hatten wir sogar um die 5 Seite wo ich das gesehen hab, leider kann ich mich weder an die URL noch an die Topics erinnern, aber wenn ich morgen mal Zeit hab schau ich meien alten Posts an und dann komm ich wieder auf das Topic...
 
Möglich ist das auf jeden Fall....


ich schätze nur, es wird mit JS unter Umständen recht belastend für den Rechner.
JS nimmt sich an Leistung, was es bekommen kann, und dafür braucht es wahrscheinlich verhältnismässig viel...

Ich würde angesichts dessen zugunsten der Besucher wohl eher drauf verzichten.
 
Erst mal danke für eure Antworten.

@con-f-use: ich habe eben auch schon danach gesucht, aber nichts gefunden,
wäre toll wenn du dich noch ein kleines bisschen erinnern könntest :-)

@sven: Wegen Rechnerleistungen, etc. müsste man dann halt schauen, wie's
funktioniert. Aber Funktionalität geht bestimmt vor, da gebe ich dir Recht...

Also: Ich bin immer noch für jede Hilfe dankbar!
 
Ich bin's schon wieder :-)

Ich habe jetzt mal einen "Javascript-links-rechts-Scroller" gefunden...

Code: 
<html><head><title>bildscroller</title>
<style type="text/css"> 
<!-- 
body { overflow-x:hidden; overflow-y:hidden; margin-top: 0px; margin-right:0px; margin-bottom:0px; margin-left:0px} 
//--> 
</style>
<script language="javascript">
window.onerror=null;
</script>
<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>
<title>bildscroller</title></head>
<BODY onload=mouGim();init(1250);goNow();imHere(); leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<DIV id=box1 style="CLIP: rect(0px 1250px 58px 0px); POSITION:absolute; HEIGHT:58px; LEFT: 0px;  top:0px; WIDTH:795px; Z-INDEX:2">
<TABLE border=0 cellPadding=0 cellSpacing=0 height=56>
  <TR vAlign=center>
    <TD><IMG height=58 name=sup01 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text1.gif" border=0 height=58 width=113></TD>
    <TD><IMG height=58 name=sup02 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text2.gif" border=0 height=58 width=113></TD>
    <TD><IMG height=58 name=sup03 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text3.gif" border=0 height=58 width=113></TD>
	<TD><IMG height=58 name=sup04 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text4.gif" border=0 height=58 width=113></TD>
    <TD><IMG height=58 name=sup05 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text5.gif" border=0 height=58 width=113></TD>
    <TD><IMG height=58 name=sup06 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text6.gif" border=0 height=58 width=113></TD>
	<TD><IMG height=58 name=sup07 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text7.gif" border=0 height=58 width=113></TD>
    <TD><IMG height=58 name=sup08 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text8.gif" border=0 height=58 width=113></TD>
    <TD><IMG height=58 name=sup09 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text9.gif" border=0 height=58 width=113></TD>
	<TD><IMG height=58 name=sup10 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text10.gif" border=0 height=58 width=113></TD>
    <TD><IMG height=58 name=sup11 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text11.gif" border=0 height=58 width=113></TD>
    <TD><IMG height=58 name=sup12 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text12.gif" border=0 height=58 width=113></TD>
		</TR></TABLE>
</DIV>
<DIV id=box2 style="CLIP: rect(0px 0px 1250px 0px); HEIGHT:587px; LEFT:1250px; POSITION:absolute; top:0px; WIDTH:1250px; Z-INDEX:1">
<TABLE border=0 cellPadding=0 cellSpacing=0>
  <TR vAlign=center>
    <TD><IMG height=58 name=sup13 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text1.gif" border=0 height=58 width=113></TD>
    <TD><IMG height=58 name=sup14 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text2.gif" border=0 height=58 width=113></TD>
	<TD><IMG height=58 name=sup15 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text3.gif" border=0 height=58 width=113></TD>
    <TD><IMG height=58 name=sup16 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text4.gif" border=0 height=58 width=113></TD>
	<TD><IMG height=58 name=sup17 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text5.gif" border=0 height=58 width=113></TD>
    <TD><IMG height=58 name=sup18 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text6.gif" border=0 height=58 width=113></TD>
	<TD><IMG height=58 name=sup19 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text7.gif" border=0 height=58 width=113></TD>
    <TD><IMG height=58 name=sup20 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text8.gif" border=0 height=58 width=113></TD>
    <TD><IMG height=58 name=sup21 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text9.gif" border=0 height=58 width=113></TD>
	<TD><IMG height=58 name=sup22 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text10.gif" border=0 height=58 width=113></TD>
    <TD><IMG height=58 name=sup23 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text11.gif" border=0 height=58 width=113></TD>
    <TD><IMG height=58 name=sup24 src="bilder/blanc.gif" width=56></TD>
    <TD><img src="bilder/text12.gif" border=0 height=58 width=113></TD>
</TR></TABLE>
</DIV>
<DIV id=box3 style="CLIP: rect(0px 1250px 57px 0px); HEIGHT:58px; LEFT:0px; POSITION:absolute; top:0px; WIDTH:1250px; Z-INDEX:2"><IMG height=58 name=hide01 src="bilder/blanc_trans.gif" width=56></DIV>
<DIV id=box4 style="CLIP: rect(0px 0px 57px 0px); HEIGHT:57px; LEFT:0px; POSITION:absolute; top:0px; WIDTH:1250px; Z-INDEX:1"><IMG height=58 name=hide01 src="bilder/blanc_trans.gif" width=56></DIV>
</body></html>

Leider bin ich (noch) nicht so der Javascript-Pro und ich habe ein bisschen
Mühe den Code auseinander zu nehmen bzw. anzupassen. Ich möchte nämlich dieses
blanc_trans.gif rausnehmen, das so komisch hinundherschwirrt und auch die Geschwindigkeit, mit der sich der Scroller bewegt, abändern können...

Eine Antwort auf diese zwei Fragen würde mir reichen, wenn jedoch jemand ein Tutorial schreiben möchte bzw. den Code ein bisschen auseinander nehmen würde (mit Kommentaren), wäre natürlich um so besser... Ist immer gut zu gebrauchen :-)

Ich versuche in der Zeit nochmals den Code zu entziffern :-(

Gruss, Matthias
 
So, da mir niemand geholfen hat, habe ich jetzt (nach langer Mühe :-)) das ganze in Etwa so, wie ich mir das vorgestellt habe. Doch kurz nach der Freude kam der Schock, in Opera, Netscape und Mozilla sieht der Scroller wieder ganz anders aus...

Ich wäre froh, wenn mir jemand den Grund dafür nennen kann, den von Möglichkeiten der div. Browsers habe ich nun mal wirklich keine Ahnung...

Hier der Link

Noch was: Weiss jemand, wie ich die Laufgeschwindigkeit senken kann?

Gruss, Matthias
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück