Frage stellen

objekt schrittweise automatisch bewegen? (javascript)

2.7k Aufrufe
Gefragt in Skripte(PHP,ASP,Perl...) von
ich versuche das element "ball" schrittweise um 10px nach unten zu verschieben, bis es an einem bestimmten punkt angelangt ist. auslöser dafür soll ein onkeyup-event sein (taste egal).
und jetzt stehe ich vor dem problem, dass die von mir angewandte schleife das element so oft 10px nach unten "rechnet", wie es kann, und dann mit einem ruck das element nach ganz unten springt.
eigentlich sollen aber die schrittweisen 10px-verschiebungen einzeln ausgeführt werden. mit anderen worten: auf einer (z.b.) 100px langen strecke springt das element zur zeit einmal 100px, und fertig. es soll aber 10 mal springen, je 10px.
wie geht das?

document.onkeyup=function runter(){
var oben = document.getElementById("ball").style.top.replace("px","");
while (parseInt(oben) < 300){
document.getElementById("ball").style.top = parseInt(oben)+10;
}
}

9 Antworten

0 Punkte
Beantwortet von
der Browser ist so optimiert, dass er derartige Darstellungsänderungen in Schleifen zusammenfasst.

Du musst das zeitlich trennen, zB. durch window.setInterval o.ä.

Übrigens fehlt bei der Zuweisung die Einheit!
0 Punkte
Beantwortet von
wie soll das mit setInterval aussehen? ich hab es schon mal setTimeout() probiert, das hat aber nichts gebracht.

ist die einheit denn immer notwendig? die wurde bisher nämlich irgendwie automatisch ergänzt.
aber jetzt merke ich auch erst, dass das mit dem onkeyup, so wie es da steht, auch nur im firefox funktioniert.
wäre dankbar für noch mehr hinweise...
0 Punkte
Beantwortet von
ok setInterval hab ich jetzt doch verstanden, und es geht, zumindest im FF. wie krieg ich das jetzt auch in anderen browsern zum laufen?
0 Punkte
Beantwortet von
wie krieg ich das jetzt auch in anderen browsern zum laufen?
wenn du deinen Code vorenthältst läuft hier gar nichts
0 Punkte
Beantwortet von
das ist der bisherige code:

document.onkeyup=function(){
aktiv = window.setInterval("runter()", 20);
}

function runter(){
var oben = document.getElementById("ball").style.top.replace("px","");
if (parseInt(oben) < 300){
document.getElementById("ball").style.top = parseInt(oben)+10+'px';
}else{
window.clearInterval(aktiv);
}
}
0 Punkte
Beantwortet von
minimale Korrekturen zur Laufzeitoptimierung:

document.onkeyup=function(){
aktiv = window.setInterval(runter, 20);
}

function runter(){
var oben = "0"+parseInt(document.getElementById("ball").style.top,10);
if (oben < 300){
document.getElementById("ball").style.top = (oben+10)+'px';
}else{
window.clearInterval(aktiv);
}
}


lässt sich onkeyup auf jedem Browser document zuweisen? lt. SelfHTML nicht. Probiers mal in anderen Elementen. Ansonsten gib eine genauere Problembeschreibung.
0 Punkte
Beantwortet von
ich hab mich da etwas geirrt. das problem liegt nicht in diesem skript, sondern in folgendem (,welches den "ball" vorher nach oben heben sollte):

document.onkeypress=function(e){
var e = window.event || e;
var oben = document.getElementById("ball").style.top.replace("px","");

if (String.fromCharCode(e.charCode)=="s"){
document.getElementById("ball").style.top = parseInt(oben)-10+'px';
}

}

dieses skript funktioniert nur im FF. das problem wird hier dann wahrscheinlich der bezug auf eine bestimmte taste sein. hat jemand eine idee, wie ich das löse?
0 Punkte
Beantwortet von
evnts sind in JEDEM Browser anders implementiert, deine Vorgehensweise ist Mozilla-Syntax.

Um bestimmte Tasten abzufragen empfiehlt sich die Vorgensweise bei SelfHTML:events
0 Punkte
Beantwortet von
PS zur Ergänzung der o.g. Codeoptimierung:

replace("px",""); entfernt die Einheit

parseInt() liest nur die Zahl bis zum ersten Zeichen, das keine Ziffer ist.

Damit ist replace komplett überflüssig. Es handelt sich zudem um eine Methode des RegExp-Objekts und ist - da regulärer Ausdruck - somit ohnehin lahm und sollte vermieden werden.
...