Div Layer über den Anzeigebreich bewegen.

L

LotseDerLotsen

Mitglied
Div Layer über den Anzeigebreich bewegen, innerhalb Tabelle scrollen

Hi, ich habe erstens sehr wenige Plan von JavaScript,
möchte aber folgendes tun:

ich habe einen div:
Inhalt1
<div>
Inhalt2
</div>
inhalt3


Bereiche ausserhalb des Divs werden nicht angezeigt.

Nun möchte ich onmouseover den Layer nach oben bzw. unten flüssig scrollen lassen.
Also:
<div>
Inhalt1
</div>
Inhalt2
Inhalt3

usw.


Frage:
Wie mache ich das. Schöne wäre wenn jemand so nett wäre mir nen Codeschnipsel mit Kommentaren zu geben. Damit wäre mir sehr geholfen.

Danke schonmal im vorraus.
Gruß Philipp
 
Zuletzt bearbeitet:
Re: Div Layer über den Anzeigebreich bewegen, innerhalb Tabelle scrollen

Eine Möglichkeit....

packe den kompletten Inhalt in ein <div> und "beschneide" per CSS und "clip" dessen Anzeigebereich.
Mittels JS kannst du diesen Anzeigebereich dann dynamisch ändern... was den gewünschten Effekt erzielen würde.

Hier nen Bsp.(dabei wird nicht per onmouseover sondern per onmousemove im <div> selbst die "Scrollrichtung" ermittelt und die Aktion "angestossen")
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
//Variable zum Speichern der letzten Cursor-Position im Container
intY = 0;

function clipper(obj,evt)
{
    //Ermiiteln der Clip-Eigenschaften
    strClip = String(obj.style.clip);
    arrClip = strClip.match(/\d+/g);
    
    //Aktuelle Position des Cursors im Container
    intTop = (evt.offsetY) ? evt.offsetY : evt.layerY;
    
    if(intY)
        {
            //Ermitteln der neuen Clip-Werte
            (intY < intTop) ? arrClip[0]++ : arrClip[0]--;  
            (intY < intTop) ? arrClip[2]++ : arrClip[2]--; 
            
            //Sofern die neuen Clip-Werte die Grenzen des Containers nicht überschreiten.... Werte zuweisen
            if(arrClip[0] > 0 && arrClip[2] < obj.offsetHeight)
                {
                    obj.style.clip = 'rect('+arrClip[0]+'px '+arrClip[1]+'px '+arrClip[2]+'px '+arrClip[3]+'px)';
                } 
        }
        
    //gespeicherte Cursor-Position aktualisieren
    intY = intTop;
}
//-->
</script>
</head>

<body>
<div onmouseout="intY=0"onmousemove="clipper(this,event)"style="position:absolute;clip:rect(100px 400px 200px 0px);">
    Inhalt1<br>
    Inhalt2<br>
    Inhalt3<br>
    usw....
</div>
</body>
</html>
Damit das Ganze funktioniert, muss das <div> "absolute" positioniert sein.

Das sollte als Ansatz ausreichen, um es von bspw. per onmouseover zu erledigen.

Test
 
Ich suche etwas ganz ähnliches, bin aber leider eine ziemliche Gurke in JavaScript um das aus eigener Hand zu lösen. Ich hätte gerne, dass sich der Inhalt eines DIV automatisch abhängig von der Mausposition scrollt.

Soetwas bzw. genau das was ich suche findet sich auf der Startseite von http://www.renault.de/. In der Mitte befindet sich eine "Neuwagen-Kasten". Dort wird, wenn die Maus in den oberen 50% ist der Inhalt nach oben gescrollt, und unterhalb nach unten.

Jetzt habe ich zwar einen Ansatz wie es logisch zu lösen wäre, da hört es aber schon auf. Soetwas gibt es doch bestimmt auch als Codeschnipsel irgendwo?

Ich habe das bisher soweit, dass ich ein DIV mit dem Inhalt habe:

PHP: 
<div id="layer" onmouseover="DoIt()">
   <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
   </ul>
</div>

Dann habe ich den mit CSS entsprechend formatiert:

PHP: 
#layer{
   width:200px;
   height:100px;
   overflow:hidden;
   border:1px solid #CCC;
   background: #F4F4F4;
   padding:2px;
}

Tja, jetzt brauche ich nur noch den Inhalt von DoIt(); :D
Kann mir jemand weiterhelfen?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück