Saturday, November 19, 2011

JavaScript - pomeranje slike unutar DIV taga

Evo jedne male skriptice za pomeranje pozadinske slike u DIV tagu. Pomeranje slike izgleda ovako:





Ovo je kod:


<html>
 <head>
 <title></title>
 <script type="text/javascript">
     function Pomeranje(x, smer, brzina)
    { 
        x += smer * brzina;
        if (x <= -400) smer = 1;
        if (x >= 0) smer = -1;
        document.getElementById("slika").style.backgroundPosition = x + "px 0px";
        setTimeout('Pomeranje(' + x + ', ' + smer + ', ' + brzina + ');', 100);
    }
</script>
 <style type="text/css">
#slika{  
    width: 200px;  
    height: 100px;
    background: url('slika.png');
    background-position: 0px 0px;
    margin-left: auto;
    margin-right: auto;
}
 </style>
 </head>

<body OnLoad='Pomeranje(0, -1, 10);'>
    <div id='slika'></div>
 </body>
</html>


Možete da podešavate početnu poziciju, smer i brzinu kretanja.

Pomeranje (pocetna pozicija, smer, brzina kretanja)

U ovom primeru slika je široka 600 px, a radni prostor (div u kojem se prikazuje slika) je širine 200 px. To znači da sliku pomeramo od 0 do -400 px. Kretanje slike počinje od 0 px  i pomera se svaki put za -10 px  (na svakih 100ms). Kada dođe do -400px , smer se menja i pomeranje je po +10 px. I tako se slika stalno kreće levo-desno.

Ovu animaciju možete iskoristiti za sliku na vrhu stranice (header image). Ako želite da je postavite unutar posta na blogu, treba da unesete sledeći kod:

<div id='slika' style="width: 200px; height: 100px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmpDjWTLOhWMZAt34apwgJ1WcdfMvr1a16Ptp3WNTeYqYvFbrfMT_jIKEtpe4r2GjojhcGnIVZ_THRiJAfo_-r7yQupeJnQUU95B_qhlGXOfciFp7zbSTYJbgObKvVxNvjrTQZ16RV4g7C/s1600/slika.PNG'); background-position: 0px 0px; margin-left: auto; margin-right: auto;"></div>

<script type="text/javascript">
 function Pomeranje(x, smer, brzina)
 {
x += smer * brzina;
 if (x <= -400) smer = 1;
 if (x >= 0) smer = -1;
 document.getElementById("slika").style.backgroundPosition = x + "px 0px";
 setTimeout('Pomeranje(' + x + ', ' + smer + ', ' + brzina + ');', 100);
 }
</script>
<script type="text/javascript">
 Pomeranje(0, -1, 10);
</script>

Vodite računa da ubacite odgovarajuće parametre:
  • width: 200px - stavite željenu širinu div polja u pikselima.
  • height: 100px - stavite željenu visinu div polja u pikselima
  • (x <= -400) - umesto -400 stavite odgovarajuću vrednost koju dobijate oduzimanjem širine div-a i širine slike (u ovom slučaju 200 - 600 =  -400)
  • url('http://....') - stavite adresu vaše slike. Slika se mora nalaziti negde na internetu.





Ознаке: , ,