fliegender Layer (endlos)

Ariane85 · 11.11.2005, 17:34

Hallo zusammen,

ich möchte gerne ein Bild (in einem Layer) über die Webseite fliegen lassen.
Der Layer soll von oben rechts nach unten links sich bewegen (fliegen).
Und das mit einer Endlosschleife.

Geht sowas? Kann mir wer da helfen?

Danke, Ariane

Malleus · 11.11.2005, 22:26

Ist zwar nicht ganz was Du wolltest, aber vielleicht kannst Du es ja auch gebrauchen:

Test

PHP-Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Malleus Animation</title>

<script type="text/javascript">



function startAnimation()

{

    oMyImage = document.getElementById( "myImage" );

    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;

}



function getBodyHeight()

{

return (window.innerHeight)?window.innerHeight:document.body.offsetHeight;

}



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 ); // hier einen größeren Wert angeben und es wird langsamer 

}

</script>

</head>



<body onload="startAnimation()" style="width:100%;height:100%;padding:0px;margin:0px">

<Div style="background-color:yellow;width:100%;height:100%;position:absolute">

<img alt="myImage" style="position:absolute;top:0px;left:0px" id="myImage" src="h.gif" height="48" width="48">

</div>

</body>

</html>

Ariane85 · 12.11.2005, 01:35

Herzlichen Dank Malleus,

leider ist das Script nicht für meine Zwecke geeignet.
Der Layer sollte links unten (bottom left) verschwinden und erneut oben links anfangen (top right). Also eine Endlosschleife in der Diagonalen.

Vielleicht hast du oder ein anderer für mich einen heißen Tipp bzw. Script.

Ariane

Malleus · 12.11.2005, 14:41

Wie wäre es damit: Animation ObenRechts nach UntenLinks

PHP-Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Malleus Animation: RechtsOben Nach LinksUnten</title>

<script type="text/javascript">



function setTopLeft( obj , top , left )

{

    obj.style.top = top + "px";

    obj.style.left = left + "px";

}



function startAnimation()

{

    oMyImage = document.getElementById( "myImage" );

    myImageWidth = oMyImage.offsetWidth;

    myImageHeight = oMyImage.offsetHeight;

    

    dx=2;

    

    posTop = 0;

    posLeft = getBodyWidth() - myImageWidth;

    

    setTopLeft( oMyImage , posTop , posLeft );

    

    window.setTimeout( "moveImage()" , 100 );

}



function getBodyWidth()

{

return ( window.innerWidth ) ? window.innerWidth : document.body.offsetWidth;

}



function getBodyHeight()

{

return ( window.innerHeight ) ? window.innerHeight : document.body.offsetHeight;

}



function moveImage()

{

    dy = dx * ( getBodyHeight() - myImageHeight - posTop ) / posLeft;

    posLeft -= dx;

    posTop += dy;



    if (posLeft<=0)

    {

        posTop = 0;

        posLeft = getBodyWidth() - myImageWidth;

    }    

    

    setTopLeft( oMyImage , posTop , posLeft );



    window.setTimeout( "moveImage()" , 10 ); // hier einen größeren Wert angeben und es wird langsamer

}

</script>

</head>



<body onload="startAnimation()" style="width:100%;height:100%;padding:0px;margin:0px">

<Div style="background-color:yellow;width:100%;height:100%;position:absolute">

<img alt="myImage" style="position:absolute;top:-48px;left:0px" id="myImage" src="h.gif" height="48" width="48">

</div>

</body>

</html>

Ariane85 · 12.11.2005, 17:09

Vielen Dank Malleus,

funktioniert prima!

Viele Grüße Ariane

Malleus · 12.11.2005, 20:39

Freut mich, daß ich helfen konnte.

Bis zum nächsten Mal

Frank