Oldal: 1 / 2 12 UtolsóUtolsó
Eredmény: 1 - 10 (13) összesen

Téma: JavaScript png animáció - több egyszerre?

  1. #1
    Törzsvendég
    Csatlakozott
    14-08-02
    Hozzászólás
    145
    Begyűjtött 2 köszönetet
    2 hozzászólásával

    Kérdés JavaScript png animáció - több egyszerre?

    Sziasztok!

    Az lenne a problémám, hogy van egy adott kód:
    Kód:
    <style>#animation { background-repeat: no-repeat; height: 80px; width: 80px; }</style>
    <script>
    function startAnimation() {
        var frameHeight = 80;
        var frames = 54;
        var frame = 0;
        var div = document.getElementById("animation");
        setInterval(function () {
            var frameOffset = (++frame % frames) * -frameHeight;
            div.style.backgroundPosition = "0px " + frameOffset + "px";
        }, 50);
    }
    </script>
    <img id="animation" style="background-image: url(1.png);"></img><br>
    <img id="animation" style="background-image: url(2.png);"></img><br>
    . . .
    <img id="animation" style="background-image: url(10.png);"></img><br>
    Hogyan oldom meg, hogy az összes animation ID-jű képnek változzon a háttere? (A hátterek ugyanakkorák.)
    Így csak az elsőé változik.

    Norbi



  2. #2
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.744
    Begyűjtött 1.428 köszönetet
    892 hozzászólásával

    Alapbeállítás re: JavaScript png animáció - több egyszerre?

    Ugyanaz az ID tobb html elemen nem kellene hogy szerepeljen, mert az egy egyedi azonosito.



  3. #3
    Törzsvendég
    Csatlakozott
    14-08-02
    Hozzászólás
    145
    Begyűjtött 2 köszönetet
    2 hozzászólásával

    Alapbeállítás re: JavaScript png animáció - több egyszerre?

    Az működne, ha
    HTML kód:
    <div id="animation">
    <img style="background-image: url(1.png);"></img><br> <img style="background-image: url(2.png);"></img><br> . . . <img style="background-image: url(10.png);"></img><br>
    <div>
    Vagy nem ID alapján nézni, hanem tag név alapján, vagy class alapján.



  4. #4
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.744
    Begyűjtött 1.428 köszönetet
    892 hozzászólásával

    Alapbeállítás re: JavaScript png animáció - több egyszerre?

    Idézet Norbii eredeti hozzászólása Hozzászólás megtekintése
    Az működne, ha
    HTML kód:
    <div id="animation">
    <img style="background-image: url(1.png);"></img><br> <img style="background-image: url(2.png);"></img><br> . . . <img style="background-image: url(10.png);"></img><br>
    <div>
    Vagy nem ID alapján nézni, hanem tag név alapján, vagy class alapján.
    Igen. A 'class' egy fokkal gyorsabb, ha jol tudom.



  5. #5
    Törzsvendég
    Csatlakozott
    14-08-02
    Hozzászólás
    145
    Begyűjtött 2 köszönetet
    2 hozzászólásával

    Alapbeállítás re: JavaScript png animáció - több egyszerre?

    Nem működött classal. Szerintem a JS nem tudja a class szerint módosítani.
    Hogy lehet megoldani, hogy jó legyen?



  6. #6
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.744
    Begyűjtött 1.428 köszönetet
    892 hozzászólásával

    Alapbeállítás re: JavaScript png animáció - több egyszerre?

    Idézet Norbii eredeti hozzászólása Hozzászólás megtekintése
    Nem működött classal. Szerintem a JS nem tudja a class szerint módosítani.
    Hogy lehet megoldani, hogy jó legyen?
    https://developer.mozilla.org/en-US/...ntsByClassName



  7. #7
    Törzsvendég
    Csatlakozott
    14-08-02
    Hozzászólás
    145
    Begyűjtött 2 köszönetet
    2 hozzászólásával

    Alapbeállítás re: JavaScript png animáció - több egyszerre?

    Nem jó így sem.

    HTML kód:
    <style>
    .animation {
        background-repeat: no-repeat;
        height: 80px;
        width: 80px;
    }
    </style>
    <script>
    function startAnimation() {
        var frameHeight = 80;
        var frames = 54;
        var frame = 0;
        var img = rootElement.getElementsByClassName("animation");
        setInterval(function () {
            var frameOffset = (++frame % frames) * -frameHeight;
            img.style.backgroundPosition = "0px " + frameOffset + "px";
        }, 50);
    }
    </script>
    <img class="animation" style="background-image: url(http://www.kephost.com/images/2015/07/16/kep.png);"></img>
    <img class="animation" style="background-image: url(http://www.kephost.com/images/2015/07/16/kep.png);"></img>
    Ez példa kép, nem akarok szaladó ebet
    Ez a Skype-os kutya.



  8. #8
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.744
    Begyűjtött 1.428 köszönetet
    892 hozzászólásával

    Alapbeállítás re: JavaScript png animáció - több egyszerre?

    Nezd meg megegyszer a linket, ami getElementsByClassName egy collection-t ad vissza, amin vegig kell menned egy ciklussal.



  9. #9
    Szerkesztő djjean logója
    Csatlakozott
    11-10-15
    Hely
    Baja
    Hozzászólás
    211
    Begyűjtött 48 köszönetet
    44 hozzászólásával

    Alapbeállítás re: JavaScript png animáció - több egyszerre?

    Ilyesmire gondoltál?

    hxxp://jsfiddle.net/4La8cy1f/



  10. Az alábbi felhasználók hálásak a válaszért:

    Norbii (2015-07-22)

  11. #10
    Törzsvendég
    Csatlakozott
    14-08-02
    Hozzászólás
    145
    Begyűjtött 2 köszönetet
    2 hozzászólásával

    Alapbeállítás re: JavaScript png animáció - több egyszerre?

    Köszönöm
    Ez az
    Nekem valamiért nem volt jó.
    Majd összevetem a két kódot






Oldal: 1 / 2 12 UtolsóUtolsó

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •