Bewegter Schritzug - Script funktioniert nicht
web_dance
- javascript
Hallo zusammen.
Ich würde gerne einen Schriftzug animieren. Er soll vertikal um 100 Pixel verschoben werden. Und zwar fließend. Ich bin Anfänger, was JavaScript betrifft. Ich habe es mit folgendem Script probiert.
<div id="rom" style="position:absolute;top:20px;">romantisches</div>
<script type="text/javascript">
var angabe = "px";
function pos() {
if (document.all)
document.all.rom.style.setAttribute("top",wert,"false");
else document.getElementById("rom").style.top = wert;
}
for(var vtop = 20; vtop < 100; ++vtop)
{
var wert = vtop + angabe;
window.setTimeout("pos()",2000);
}
</script>
Was mache ich falsch? Kann mir jemand helfen?
also ich habs mir jetz nich so wirklich verinnerlicht, allerdings musst du die variable >wert< global definieren, das dürft schonmal n guter ansatz sein ;)
gruß
Sorry, wenn ich es nicht hinreichend erklärt habe. Also die Funktion soll einfach, den Div(id=rom) je Durchlauf um einen Pixel nach unten schieben. Insgesamt mit 100 Durchläufen, halt um 100 Pixel. Ich habe die Variablen jetzt als global definiert. Funktioniert immer noch nicht.
Ich glaub, ich bin ein bißchen dämlich. Was funktioniert überhaupt nicht. Der Text wird einfach sofort um 100 Pixel verschoben. Ich hätte es gerne Pixel für Pixel, so dass eine Animation entsteht. ;-)
Ich habe da noch ein paar kleine Fehler gemacht. Mein Script sieht so aus. Jetzt passiert gar nichts mehr.
<div id="rom" style="position:absolute;top:20px;">romantisches</div>
<script type="text/javascript">
var angabe = "px";
function pos() {
if (document.all)
document.all.rom.style.setAttribute("top",wert,"false");
else document.getElementById("rom").style.top = wert;
}
for(vtop = 20; vtop == 100; vtop = vtop + 1)
{
wert = vtop + angabe;
window.setTimeout("pos()",200);
}
</script>
Jetzt bin ich aber mit meinem Latein am Ende. Habs jetzt hundertmal ausprobiert. Ich denke, das Script ist fehlerlos. Vielleicht brauche ich eine andere Anweisung. Der Schriftzug hupst weiterhin gleich auf Pixelposition 120. Ich möchte aber, dass er Pixel für Pixel wandert und somit ein Animationseffekt entsteht. Was für einen Befehl muss ich da verwenden?
<div id="rom" style="position:absolute;top:20px;">romantisches</div>
<script type="text/javascript">
angabe = "px";
go = 20;
var wert;
function pos()
{
if (document.all)
{
document.all.rom.style.setAttribute("top",wert,"false");
}
else
{
document.getElementById("rom").style.top = wert;
}
}
for(var count = 0; count <= 100; count++)
{
var wert = go + angabe;
go++;
window.setTimeout("pos()",2000);
}
</script>
Sieh mal hier nach :
http://www.dhtml.seite.net
Die meisten Sachen funktionieren mit allen Browsern.
Gruß
David