Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Animate

    Hochgeladen von

    Aira Kristel Romulo
    5 Ansichten2 Seiten
    Make an animation

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    TXT, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    Make an animation

    Copyright:

    © All Rights Reserved
    Als TXT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    5 Ansichten2 Seiten

    Animate

    Hochgeladen von

    Aira Kristel Romulo
    Make an animation

    Copyright:

    © All Rights Reserved
    Als TXT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 2

    <html>

    <style>
    #containerBox {
    width: 600px;
    height: 600px;
    position: relative;
    background: red;
    }
    #animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: yellow;
    }
    #animate1 {
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: violet;
    </style>

    <body>

    <p>
    <button onclick = "myMove(),myMove1()" >Click Me to Animate</button>
    </p>

    <div id = "containerBox" >


    <div id = "animate" ></div>
    <div id = "animate1" ></div>
    </div>

    <script>
    function myMove() {
    var box = document.getElementById("animate");
    var place = 0;
    var id = setInterval(frame, 5);
    function frame() {
    if (place == 550) {
    clearInterval(id);
    }
    else {
    place++;
    box.style.top = place + 'px';
    box.style.left = place + 'px';
    }
    }
    }
    function myMove1() {
    var box = document.getElementById("animate1");
    var place = 0;
    var id = setInterval(frame, 5);
    function frame() {
    if (place == 550) {
    clearInterval(id);
    }
    else {
    place++;
    box.style.bottom = place + 'px';
    box.style.left = place + 'px';
    }
    }
    }

    </script>

    </body>
    </html>

    Das könnte Ihnen auch gefallen