Fliegende Ente

[Hape]

In den Header einfügen:

Code: Alles auswählen

<style type="text/css">
<!--
#BewegtesObjekt {
position: absolute;
left:-220px;
top:80px;
width:120px;
height:110px;
z-index:6;
}

#ObjektBox01 {
position: absolute;
top: 105px;
left: 20px;
width: 550px;
height: 200px;
border: 0px solid #8F8F8F;
margin: 0px;
padding: 0px;
background-color: #C4D0E6; /*#CDA9D6*/
}

#Objekt01 {
position: absolute;
top: 10px;
left: 180px;
margin: 0px;
padding: 0px;
text-align: left;
font-family: Arial,Helvetica,sans-serif;
color: #E0FEFB;
font-size: 140px;
line-height: 140px;
font-weight: bold;
}

#Objekt02 {
position: absolute;
top: 40px;
left: 60px;
margin: 0px;
padding:0px;
text-align: left;
font-family: Arial,Helvetica,sans-serif;
color: #A60F38;
font-size: 50px;
line-height: 50px;
font-weight: bold;
}

#Objekt03 {
position: absolute;
top: 90px;
left: 260px;
margin: 0px;
padding: 0px;
text-align: left;
font-family: Arial,Helvetica,sans-serif;
color: #2C6ED5;
font-size: 75px;
line-height: 75px;
font-weight: bold;
}
=-->
</style>

Code: Alles auswählen

<script type="text/javascript" language="JavaScript">
<!--
//Dieses Script stammt von der Webseite webtoolbox.net

// stellt die Bildschirmabmessungen fest
function dimension() {
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
if(ns6||ns4) {

breite = window.innerWidth;
//breite = screen.availWidth ;
hoehe = screen.availHeight;
}
else if(ie4) {
//breite = document.documentElement.clientWidth;
breite = document.body.clientWidth;
//breite = screen.availWidth ;
hoehe = screen.availHeight;
}

/*
wenn das Objekt nicht aus dem Fensterbereich verschwinden soll
können Sie hier die Objektbreite subtrahieren.
Die horizontale Verschiebung endet dann entsprechende Pixelbreite früher
Das vermeidet einen horitontalen Scrollbar zum Ende der Aktion
*/

breite = breite + 120;

return
}

warten = 1;
ObjektBreite = 120;

function moveTo(obj, x, y) {
        if (document.getElementById) {
        document.getElementById('BewegtesObjekt').style.left = x;
        document.getElementById('BewegtesObjekt').style.top = y;
        }
}

function init(){
        dimension();
        if(document.getElementById){
        obj = document.getElementById("BewegtesObjekt");
        obj.style.left = "10px";
        slideRight();
        }
}

function slideRight(){
    var wiederholung = 1;
    if(document.getElementById){
        if(parseInt(obj.style.left) < breite){
        obj.style.left = parseInt(obj.style.left) + 5 + "px";
        setTimeout("slideRight()",50);
        }
        else {


             if(wiederholung == 1)
             {
             obj.style.left = -66;
             obj.style.left = parseInt(obj.style.left) + -ObjektBreite + "px";

             // warten am Ende bis zur nächsten Wiederholung?
             if(warten == 1) {
             setTimeout("slideRight()",2000);
             } else {
             setTimeout("slideRight()",50);
             }
             }
             }
        }
    }

function slideLeft(){
    var wiederholung = 1;
    if(document.getElementById){
        if(parseInt(obj.style.left) < breite){
        obj.style.left = parseInt(obj.style.left) - 5 + "px";
        setTimeout("slideRight()",50);
        }
        else {
             if(wiederholung == 1)
             {
             obj.style.left = -ObjektBreite;
             obj.style.left = parseInt(obj.style.left) - 5 + "px";
             setTimeout("slideRight()",50);
             }
             }
        }
    }

function ShowHide(id, visibility) {
    divs = document.getElementsByTagName("div");
    divs[id].style.visibility = visibility;
}


setTimeout("init()",2000);



function ObjektBewegen01() {
document.getElementById("Objekt02").style.left = "200";
//alert(document.getElementById("Objekt02").offsetLeft);
}

function ObjektBewegen02() {
document.getElementById("Objekt02").style.left = "30";
//alert(document.getElementById("Objekt02").offsetLeft)
}

function ObjektBewegen03() {
var PLinks = document.getElementById("Objekt02").offsetLeft;
//alert(PLinks);
PLinks = PLinks +15;
Wert02 = PLinks + "px";
document.getElementById("Objekt02").style.left = Wert02;
}



//-->
</script>

Für die Darstellung in den Body einfügen:

Code: Alles auswählen

<div id="BewegtesObjekt"><img src="ani-ente.gif" width="73" height="67" border="0" alt=""></div>

Hier eine Demoseite: Ente