nicht angemeldet
Bilder bewegen
Matthias Apsel
Der Martin
Gunnar BittersmannHallo zusammen
Ich bin gerade dabei mit Hilfe von JavaScript eine Funktion zu schreiben.
Diese soll grundsätzlich ein Bild bewegen. Mit hilfe von meinbild.style.left=... und meinbild.style.top=...
und einer passenden Schleife funktioniert dies soweit auch.
Beim einbinden in meine Website habe ich noch eine kleine Schwierigkeit entdeckt. Und zwar möcht ich dass das Bild sich nur innerhalb eines Bereiches befindet. Falls es über diesen Bereich hinaus geht, soll es einfach abgeschnitten werden und seine Bewegung zuende führen bis es ganz verschwunden ist...
Anbei meinen aktuellen Code: Das bild sollte nur im grünen Bereich sichtbar sein..
<html>
<head>
</head>
<SCRIPT LANGUAGE="JavaScript">
var r = 100;
var xm = 300;
var ym = 200;
var w = 0;
function bewegen()
{
meinbild.style.left=(Math.sin(w)*r+xm)+'px';
meinbild.style.top=(Math.cos(w)*r+ym)+'px';
w+=Math.PI/1000;
if (w>2*Math.PI)
{
w=0
}
window.setTimeout ('bewegen()', 3);
}
</SCRIPT>
<body onLoad="bewegen()" bgcolor="#0066FF">
<div style="height:400px; width:800px; background-color:#0F0;">
<div id ="meinbild" style="position:absolute; left:0px; top:0px">
<img src = "logo1.png" style="overflow:hidden">
</div>
</div>
</body>
</html>
-
Om nah hoo pez nyeetz, Schnudi!
<SCRIPT LANGUAGE="JavaScript">
var r = 100;
var xm = 300;
var ym = 200;
var w = 0;function bewegen()
{
meinbild.style.left=(Math.sin(w)*r+xm)+'px';
meinbild.style.top=(Math.cos(w)*r+ym)+'px';
w+=Math.PI/1000;if (w>2*Math.PI)
{
w=0
}
window.setTimeout ('bewegen()', 3);
}
</SCRIPT>* es ist nicht notwendig, SCRIPT großzuschreiben
* es braucht kein Language-Attribute, dafür (in HTML < 5) ein typ-Attribut.pack deine Bewegung in eine geeignete while-Schleife
<pseudocode>
while (left + bildbreite < breite des Elements ODER top + bildhöhe < höhe des Elements)
{
meinbild.style.....
}
</pseudocode>Matthias
--
1/z ist kein Blatt Papier.
-
Hallo Matthias
Vielen Dank für deine rasche Antwort..
Meine Idee ist, dass das Bild konstant weiterläuft und nur der Bereich abgeschnitten wird, welcher ausserhalb der Div box liegt...
gibt es da unter style eine entsprechende möglichkeit? Oder kanns du mir einen Input geben wonach ich googeln soll... ;)Vielen Dank
Om nah hoo pez nyeetz, Schnudi!
<SCRIPT LANGUAGE="JavaScript">
var r = 100;
var xm = 300;
var ym = 200;
var w = 0;function bewegen()
{
meinbild.style.left=(Math.sin(w)*r+xm)+'px';
meinbild.style.top=(Math.cos(w)*r+ym)+'px';
w+=Math.PI/1000;if (w>2\*Math.PI) { w=0 } window.setTimeout ('bewegen()', 3);}
</SCRIPT>* es ist nicht notwendig, SCRIPT großzuschreiben
* es braucht kein Language-Attribute, dafür (in HTML < 5) ein typ-Attribut.pack deine Bewegung in eine geeignete while-Schleife
<pseudocode>
while (left + bildbreite < breite des Elements ODER top + bildhöhe < höhe des Elements)
{
meinbild.style.....
}
</pseudocode>Matthias
-
Om nah hoo pez nyeetz, Schnudi!
Es ist nicht notwendig, das komplette Vorposting zu zitieren.
overflow: hidden auf das umgebende Element anwenden.Matthias
--
1/z ist kein Blatt Papier.
-
Hallo,
Es ist nicht notwendig, das komplette Vorposting zu zitieren.
im Gegenteil, das ist sogar sehr störend.
Ciao,
Martin--
Gültig sind Frauen ab 16, wohlgeformt ab 160 Pfund.
(Gunnar Bittersmann)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( -
Hallo Matthias
Vielen Dank für deine Hilfe! dies entspricht genau meinen Vorstellungen.Sorry betreffend dem Zitieren des Vorposting. Bin ganz neu in diesem Forum.. Und auch soeben begeistert von der schnellen Antwort!
viel Dank
Gruss
schnudi
-
-
-
-
@@Schnudi:
nuqneH
Ich bin gerade dabei mit Hilfe von JavaScript eine Funktion zu schreiben.
Diese soll grundsätzlich ein Bild bewegen.Und warum willst du das mit JavaScript tun? Es geht grundsätzlich mit CSS.
Qapla'
--
Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)