Ich versuche, ein Div mit nur Javascript (NO JQUERY) vom unteren Rand der Seite nach oben zu schweben.

Ich habe hier eine Geige: http://jsfiddle.net/H7GSF/

Es bewegt sich einmal nach oben, wird jedoch nicht wiederholt, um eine "Animation" zu erstellen.

HTML

<div id="block"></div>​

CSS

#block { position: fixed; background: red; width: 100px; height: 20px; bottom: 0; }​

JS

b = 0;
el = document.getElementById('block');
setInterval(function(){
    b+=10;
    el.setAttribute('style','bottom:'+(b)+'px;');
},20);​
1
Fluidbyte 10 Okt. 2012 im 00:45

3 Antworten

Beste Antwort

Weil Sie den Wert von bottom nicht aktualisieren. Es ist immer 10

Versuche dies,

b = 0;
el = document.getElementById('block');
setInterval(function(){
    b+=10;
    el.setAttribute('style','bottom:'+(b)+'px;');
},20);​
2
Jashwant 9 Okt. 2012 im 20:48

Bitte schön! http://jsfiddle.net/thewebguy/H7GSF/2/

Sie müssen nur die Variable b ändern

0
thewebguy 9 Okt. 2012 im 20:49

Siehe http://jsfiddle.net/H7GSF/1/

Benutz einfach

b = 0;
el = document.getElementById('block');
setInterval(function(){
    b+=10;
    el.setAttribute('style','bottom:'+b+'px;');
},20);

Das Problem war, dass b konstant war!

Darüber hinaus denke ich, dass es besser ist, den Stil mithilfe der Eigenschaft style anstelle des Attributs style zu ändern (und es ist kürzer):

el.style.bottom=b+'px;'

Beachten Sie außerdem, dass Sie bei Verwendung des Attributs style frühere Stile entfernen, die dem Element hinzugefügt wurden, indem Sie sowohl das Attribut als auch die Eigenschaft style verwenden.

0
Oriol 9 Okt. 2012 im 20:54