Chewie
Aktives Mitglied
Thread Starter
- Dabei seit
- 18.03.2003
- Beiträge
- 314
- Reaktionspunkte
- 1
Hallo zusammen,
ich stehe gerade ein bisschen mit JavaScript auf Kriegsfuß. Ich möchte gerne einen Text, der sich in einem <div> befindet innerhalb der Grenzen eines anderen <div> bewegen. Der übergeordnete Container ist also 600x400px groß und darin soll der Text rumfliegen und an den Rändern jeweils rechtwinklig abprallen.
Ich hab ein Script gefunden, das sowas innerhalb des Browserfensters steuert. Da wird allerdings die Fenstergröße abgefragt. Ich hab nun versucht die Fenstergröße durch meinen <div> zu ersetzen... hat nicht so recht geklappt.
Vielleicht kann mir jemand helfen?
Das steht im Head:
Der Aufruf geht dann zum einen über
und an den beiden <div> über
Weiß jemand, was ich da ändern muss?
Danke und viele Grüße
Chewie
ich stehe gerade ein bisschen mit JavaScript auf Kriegsfuß. Ich möchte gerne einen Text, der sich in einem <div> befindet innerhalb der Grenzen eines anderen <div> bewegen. Der übergeordnete Container ist also 600x400px groß und darin soll der Text rumfliegen und an den Rändern jeweils rechtwinklig abprallen.
Ich hab ein Script gefunden, das sowas innerhalb des Browserfensters steuert. Da wird allerdings die Fenstergröße abgefragt. Ich hab nun versucht die Fenstergröße durch meinen <div> zu ersetzen... hat nicht so recht geklappt.
Vielleicht kann mir jemand helfen?
Das steht im Head:
PHP:
<script type="text/javascript">
function startAnimation()
{
oMyImage = document.getElementById( "myDiv" );
myImageWidth = oMyImage.offsetWidth;
myImageHeight = oMyImage.offsetHeight;
dx = 2;
dy = 2;
posTop = 0;
posLeft = 0;
window.setTimeout( "moveImage()" , 1000 );
}
function getBodyWidth()
{
return (window.innerWidth)?window.innerWidth:document.body.offsetWidth;
//return (document.contentscroll.width); <--- Funktioniert nicht
}
function getBodyHeight()
{
return (window.innerHeight)?window.innerHeight:document.body.offsetHeight;
//return (document.contentscroll.heihgt); <--- Funktioniert nicht
}
function moveImage()
{
posTop += dy;
posLeft += dx;
oMyImage.style.top = posTop + "px";
oMyImage.style.left = posLeft + "px";
if ( ( posTop >= getBodyHeight() - myImageHeight ) || ( posTop <= 0 ) )
{
dy *= -1;
};
if ( ( posLeft >= getBodyWidth() - myImageWidth ) || ( posLeft <= 0 ) )
dx *= -1;
window.setTimeout( "moveImage()" , 10 );
}
</script>Der Aufruf geht dann zum einen über
HTML:
<body onload="startAnimation()">und an den beiden <div> über
HTML:
<div id="contentscroll" style="position:absolute; width:600px; height:400px; z-index:20000; ">
<div id="myDiv" style="position:absolute; z-index:10000; ">
--- hier der fliegende Text ---
</div>
</div>Weiß jemand, was ich da ändern muss?
Danke und viele Grüße
Chewie