JS Slide Effekt
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
benutzen
button
city
code
dank
ding
effekt
einstellen
element
fenster
frage
http
intervall
maus
position
riese
strecke
tip
umdrehen
url
-
Ich wollte einen Slide Effekt erstellen.
das habe ich leider nur Über einen Intervall geschafft... leider war das ganze ein bisschen unglücklich. jetzt habe ich schon lange gegoogelt und habe herausgefunden das man dazu besser einen timer nutzt.
Jetzt zu meiner frage:
kennt jemand eine gutes (= einfaches und verständliches) tutorial zu
a) silde effekt
b) timer
mfg andré -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Meinst du sowas:
<html> <head> <script language="javascript"> var inc = false; var w = 0; function slide () { w += (inc = w % 200 ? inc : ! inc) ? 4 : -4; document.getElementById ("eins").style.width = w + "px"; setTimeout ("slide()", 50); } </script> </head> <body onload="slide()"> <div id="eins" style="height:100px;background-color:blue;width:0px;"> </div> </body> </html>
Beitrag zuletzt geändert: 3.8.2009 19:59:24 von census -
ja genau so was habe ich gesucht nur eben ohne timeout... da ich das ganze für meine Navi benutzen wollte...
ich habs ein bissel abgeändert... wenn man das ausprobiert sieht man sofort was nicht mehr geht.
<html> <head> <script language="javascript"> var i = false; var w = 0; function slide(elm_id){ if(i){ slideUp(elm_id); i = false; } else{ slideDown(elm_id); i = true; } } function slideUp(e){ w -= 8; document.getElementById ("eins").style.height = w + "px"; if(w > 0) { setTimeout ("slideUp('"+e+"')", 50); } } function slideDown(e){ w += 8; document.getElementById ("eins").style.height = w + "px"; if(w <= 150)setTimeout ("slideDown('"+e+"')", 50); } </script> </head> <body> <p onmouseover="slide('eins')" onmouseout="slide('eins')" style="width:100px; height:100px; background-color:red"></p> <div id="eins" style="height:0;background-color:blue;width:100px;"> </div> </body> </html>
wenn man wartet bis der prozess zu ende ist ist auch alles in ordnug... aber wenn nicht... siehts böse aus. und dann wollte ich noch frage wie ich die minimal benötigte höhe für das slide element abfagen kann? da ja nicht alle elemente hinterher gleichgroß sind
mfg andré
Beitrag zuletzt geändert: 4.8.2009 16:40:55 von andre-morillon -
nochmal ein Tipp: such für sowas mal nach JQuery. Das ist Perfekt dafür geeignet!
-
Wie soll denn das Zielverhalten sein?
Beim MouseOver über A, soll DIV B aufgeslided werden, solange wie die Maus in A ist?
Oder Soll bei MouseOver über A, das div B aufgeslided werden und immer da bleiben?
Oder soll bei MouseOver über A, das div B aufgeslided werden und erst dann wieder gehen, wenn die Maus weder in A noch in B ist?
Wegen der Höhe: Gib keine Höhe bei den Divs an, liese diese dann im OnLoad-Händler aus, merk sie dir und setze sie dann auf 0.- -
das soll so aussehen
<ul> <li>Top --->a <ul class="sub"> ---->b <li>sub</li> [...] </ul> </li> [..] </ul>
maus über a: slide b aus
solange maus auf a oder b lasse b da
maus aus a und b raus slide b zu
ich hoffe das ist verständlich -
Meinst du etwa so: http://census.lima-city.de/slide/slide.html
Hier mein Code:
var maxHeight = 0; var curHeight = 0; var grow = true; var working = false; function init () { maxHeight = document.getElementById ("content").offsetHeight; document.getElementById ("content").style.height = curHeight = 0; } function collapse () { if (grow) if (curHeight < maxHeight) { curHeight += 5; document.getElementById ("content").style.height = curHeight + "px"; setTimeout ("collapse()", 10); } else working = false; if (!grow) if (curHeight > 0) { curHeight -= 5; document.getElementById ("content").style.height = curHeight + "px"; setTimeout ("collapse()", 10); } else working = false; } function startGrow () { grow = true; if (! working) { working = true; collapse (); } } function startShrink () { grow = false; if (! working) { working = true; collapse (); } } -
genau sowas habe ich gesucht!!! top ... darf ich das haben?
-
natürlich kannst du gerne benutzen, schreib halt nur drüber: "Originalcode von census@lime-city.de"
Das Ding überlebt aber noch keine Größenänderung vom Fenster, aber ich hab das gefixt.
Kuckst du http://census.lima-city.de/slide/slide2.html
Hier der neue Code:
<script language="javascript"> var maxHeight = 0; var curHeight = 0; var grow = true; var working = false; function init () { window.onresize = resize; maxHeight = document.getElementById ("content").offsetHeight; document.getElementById ("content").style.height = curHeight = 0; } function collapse () { if (grow) if (curHeight < maxHeight) { curHeight += 5; document.getElementById ("content").style.height = curHeight + "px"; setTimeout ("collapse()", 10); } else working = false; if (!grow) if (curHeight > 0) { curHeight -= 5; document.getElementById ("content").style.height = curHeight + "px"; setTimeout ("collapse()", 10); } else working = false; } function startGrow () { grow = true; if (! working) { working = true; collapse (); } } function startShrink () { grow = false; if (! working) { working = true; collapse (); } } function resize () { document.getElementById ("content").style.height = ""; maxHeight = document.getElementById ("content").offsetHeight; document.getElementById ("content").style.height = curHeight = 0; } </script> -
Nimm nur, solange es erkennbar ist, dass es mein geistiger Erguss ist.
-
Danke schön!! Na klar
Kannst Du mir noch sagen wo/wie ich das einstellen kann, dass das ganze nach oben öffnet??
Danke und Gruß -
wenn ich mich nicht irre über css...
position:absolute;bottom:0;
???
das wäre mein anzatz...
mfg andré -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
