Menü das sich beim Scrollen mitbewegt
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anwender
beispiel
beitrag
deswegen
eintrag
explorer
faulheit
formatierung
formen
fort
funktion
gen
grafik
klasse
liga
mehrer
meinst
schauen
springen
verbessert
-
Hi!!!
Ich suche ein men?, dass sich mitbewegt wenn man scrollt. also es sollte wenn m?glich nicht springen, sondern sch?n fahren...
Ich bin erlichgesagt zu faul ein selber zu machen und wollte deshalb fragen ob nicht einer von euch ein mach/hat...
Danke -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das macht man mit CSS. Hier hast du ein Beispiel: http://hannover-liga.lima-city.de
Schau dir mal im Style-Bereich den Eintrag "kleber" an. Der macht nicht viel. Oder der Counter bewegt sich auch mit beim Scrollen und hat eine eigene CSS-Klasse.
Funktioniert aber nicht mit dem aktuellen Internet Explorer, weil der CSS nicht richtig unterst?tzt. -
Hier:
<head> <style type=text/css> #slide { Position: Absolute; Left: 5; Top: 110; Visibility: Visible; } A:LINK {text-decoration: none;} A:VISITED {text-decoration: none;} TD {font-family:arial;} BODY {Margin-Left: 120;} </style> </head> <body text="#FFFFFF" bgcolor="#000000" link="#FF5555" vlink="#999999" alink="#FF0000"> <span ID="slide"> <table ALIGN=LEFT BORDER=0 CELLSPACING=0 CELLPADDING=0 > <tr> <td> <hr></td> </tr> <tr> <td><a href="http://">Home</a></td> </tr> <tr> <td><a href="http://">uns so weiter</a></td> </tr> <tr> <td><a href="http://">und noch mehr</a></td> </tr> <tr> <td><a href="http://">noch mehrer</a></td> </tr> <tr> <td><a href="http://">blablablaECKE</a></td> </tr> <tr> <td><a href="http://">und so weiter</a></td> </tr> <tr> <td><a href="http://">und so fort...</a></td> </tr> <tr> <td> <hr></td> </tr> <tr> <td></td> </tr> <tr> <td> <hr></td> </tr> </table> </span><script LANGUAGE="JavaScript"> self.onError=null; currentX = currentY = 0; whichIt = null; lastScrollX = 0; lastScrollY = 0; NS = (document.layers) ? 1 : 0; IE = (document.all) ? 1: 0; function heartBeat() { if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } if(diffY != lastScrollY) { percent = .1 * (diffY - lastScrollY); if(percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if(IE) document.all.slide.style.pixelTop += percent; if(NS) document.slide.top += percent; lastScrollY = lastScrollY + percent; } if(diffX != lastScrollX) { percent = .1 * (diffX - lastScrollX); if(percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if(IE) document.all.slide.style.pixelLeft += percent; if(NS) document.slide.left += percent; lastScrollX = lastScrollX + percent; } } function checkFocus(x,y) { var totalY, totalX; floatx = document.slide.pageX; floaty = document.slide.pageY; floatwidth = document.slide.clip.width; floatheight = document.slide.clip.height; if(20 == 0) totalY = floatheight; else totalY = 25; if(0 == 0) totalX = floatwidth; else totalX = 0; if( (x > floatx && x < (floatx+totalX)) && (y > floaty && y < (floaty+totalY))) return true; else return false; } function grabIt(e) { if(IE) { whichIt = event.srcElement; while (whichIt.id.indexOf("slide") == -1) { whichIt = whichIt.parentElement; if (whichIt == null) { return true; } } whichIt.style.pixelLeft = whichIt.offsetLeft; whichIt.style.pixelTop = whichIt.offsetTop; currentX = (event.clientX + document.body.scrollLeft); currentY = (event.clientY + document.body.scrollTop); if(20 == 0) totalY = whichIt.style.pixelHeight; else totalY = 20; if(0 == 0) totalX = whichIt.style.pixelWidth; else totalX = 0; if(!(event.clientX > whichIt.offsetLeft && event.clientX < whichIt.offsetLeft + totalX) || !(currentY > whichIt.offsetTop && currentY < whichIt.offsetTop + totalY)) whichIt = null; } else { window.captureEvents(Event.MOUSEMOVE); if(checkFocus (e.pageX,e.pageY)) { whichIt = document.slide; FloatTouchedX = e.pageX-document.slide.pageX; FloatTouchedY = e.pageY-document.slide.pageY; } } return true; } function moveIt(e) { if (whichIt == null) { return false; } if(IE) { newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop); distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; whichIt.style.pixelLeft += distanceX; whichIt.style.pixelTop += distanceY; if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop; if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20; if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5; event.returnValue = false; } else { whichIt.moveTo(e.pageX-FloatTouchedX,e.pageY-FloatTouchedY); if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset; if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset; if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17; if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17; return false; } return false; } function dropIt() { whichIt = null; if(NS) window.releaseEvents (Event.MOUSEMOVE); return true; } if(NS) { window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); window.onmousedown = grabIt; window.onmousemove = moveIt; window.onmouseup = dropIt; } if(IE) { document.onmousedown = grabIt; document.onmousemove = moveIt; document.onmouseup = dropIt; } if(NS || IE) action = window.setInterval("heartBeat()",1); </script> <center> Tu ma scrollem----:-} </center> <p><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> Ich glaub du kannst deine menügrafiken auch einbinden <p>meinst du so ein Menü? naja ich hoffe ich konnte helfen...<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </body>
must nur Php-zeichen wegmachen, hab leider keine funktion gefunden hier html code einzuf?gen
Beitrag ge?ndert am 9.02.2006 13:34 von notoffline -
@notoffline:
Wenn du schon klaust, dann k?nntest du wenigsten die Formatierung erhalten. (geklaut von da: http://www.guppi.de/dhtml/scrollnav.shtml )
F?r alle, die den Code lesen wollen, hier in leserlicher Form (hab zus?tzlich nur die Formatierung des urspr?nglichen Codes verbessert):
<html> <head> <style type=text/css> #slide { Position: Absolute; Left: 5; Top: 110; Visibility: Visible; } A:LINK { text-decoration: none; } A:VISITED { text-decoration: none; } TD { font-family:arial; } BODY { Margin-Left: 120; } </style> </head> <body text=\"#FFFFFF\" bgcolor=\"#000000\" link=\"#FF5555\" vlink=\"#999999\" alink=\"#FF0000\"> <span ID=\"slide\"> <table ALIGN=LEFT BORDER=0 CELLSPACING=0 CELLPADDING=0 > <tr> <td> <hr> </td> </tr> <tr> <td> <a href=\"http://\">Home</a> </td> </tr> <tr> <td> <a href=\"http://\">uns so weiter</a> </td> </tr> <tr> <td><a href=\"http://\">und noch mehr</a> </td> </tr> <tr> <td> <hr> </td> </tr> <tr> <td> </td> </tr> <tr> <td> <hr> </td> </tr> </table> </span> <script LANGUAGE=\"JavaScript\"> self.onError=null; currentX = currentY = 0; whichIt = null; lastScrollX = 0; lastScrollY = 0; NS = (document.layers) ? 1 : 0; IE = (document.all) ? 1: 0; function heartBeat() { if (IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if (NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } if (diffY != lastScrollY) { percent = .1 * (diffY - lastScrollY); if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if (IE) document.all.slide.style.pixelTop += percent; if (NS) document.slide.top += percent; lastScrollY = lastScrollY + percent; } if (diffX != lastScrollX) { percent = .1 * (diffX - lastScrollX); if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if (IE) document.all.slide.style.pixelLeft += percent; if (NS) document.slide.left += percent; lastScrollX = lastScrollX + percent; } } function checkFocus(x, y) { var totalY, totalX; floatx = document.slide.pageX; floaty = document.slide.pageY; floatwidth = document.slide.clip.width; floatheight = document.slide.clip.height; if (20 == 0) totalY = floatheight; else totalY = 25; if (0 == 0) totalX = floatwidth; else totalX = 0; if (((x > floatx) && (x < (floatx + totalX))) && ((y > floaty) && (y < (floaty+totalY)))) return true; else return false; } function grabIt(e) { if (IE) { whichIt = event.srcElement; while (whichIt.id.indexOf(\"slide\") == -1) { whichIt = whichIt.parentElement; if (whichIt == null) { return true; } } whichIt.style.pixelLeft = whichIt.offsetLeft; whichIt.style.pixelTop = whichIt.offsetTop; currentX = (event.clientX + document.body.scrollLeft); currentY = (event.clientY + document.body.scrollTop); if (20 == 0) totalY = whichIt.style.pixelHeight; else totalY = 20; if (0 == 0) totalX = whichIt.style.pixelWidth; else totalX = 0; if (! ((event.clientX > whichIt.offsetLeft) && (event.clientX < whichIt.offsetLeft + totalX)) || (!(currentY > whichIt.offsetTop) && (currentY < whichIt.offsetTop + totalY))) whichIt = null; } else { window.captureEvents(Event.MOUSEMOVE); if (checkFocus(e.pageX, e.pageY)) { whichIt = document.slide; FloatTouchedX = e.pageX-document.slide.pageX; FloatTouchedY = e.pageY-document.slide.pageY; } } return true; } function moveIt(e) { if (whichIt == null) { return false; } if (IE) { newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop); distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; whichIt.style.pixelLeft += distanceX; whichIt.style.pixelTop += distanceY; if (whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop; if (whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; if (whichIt.style.pixelLeft > (document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20)) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20; if (whichIt.style.pixelTop > (document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5)) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5; event.returnValue = false; } else { whichIt.moveTo(e.pageX-FloatTouchedX, e.pageY-FloatTouchedY); if (whichIt.left < 0 + self.pageXOffset) whichIt.left = 0 + self.pageXOffset; if (whichIt.top < 0 + self.pageYOffset) whichIt.top = 0 + self.pageYOffset; if ((whichIt.left + whichIt.clip.width) >= (window.innerWidth + self.pageXOffset - 17)) whichIt.left = ((window.innerWidth + self.pageXOffset) - whichIt.clip.width) - 17; if ((whichIt.top + whichIt.clip.height) >= (window.innerHeight + self.pageYOffset - 17)) whichIt.top = ((window.innerHeight + self.pageYOffset) - whichIt.clip.height) - 17; return false; } return false; } function dropIt() { whichIt = null; if (NS) window.releaseEvents (Event.MOUSEMOVE); return true; } if (NS) { window.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN); window.onmousedown = grabIt; window.onmousemove = moveIt; window.onmouseup = dropIt; } if (IE) { document.onmousedown = grabIt; document.onmousemove = moveIt; document.onmouseup = dropIt; } if (NS || IE) action = window.setInterval(\"heartBeat()\", 1); </script> <center> Tu ma scrollem----:-} </center> <p> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> Ich glaub du kannst deine men?grafiken auch einbinden <p> meinst du so ein Men?? naja ich hoffe ich konnte helfen... <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </body> </html>
Das Skript unterst?tzt keinen Firefox und, wie immer bei einer solchen L?sung mit JS, ruckelt das Men? herum.
Ich habe mich deswegen entschieden, das immer nur noch mit CSS zu machen. Wer keinen CSS-konformen Browser benutzt, muss halt rumscrollen bis er wieder beim Men? ist. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage