Javascript kullanarak hareketli resim yapmak

Nis 16, 2020 by in Web Programlama

Merhaba arkadaşlar javascript ve html kodlarını kullanarak hava durumu simgeleri gibi hareketli resim yapmamız mümküdür bu uygulama için gerekli bilgiler aşağıdadır.

<html>
<head>
<script>
function resimoynat(id,resimsayisi)
{
    var img=document.getElementById(id);
        
        var index=0;
        var speed=300;
        setInterval(function(){
            if(index==7)index=0;
            img.style.backgroundPosition=(Math.round(index*(100/7)))+"%"+" 0%";
            index++;
        },speed);
    }
function load()
{
   resimoynat("3");//resmin bulunduğu div in id si
   resimoynat("4");//resmin bulunduğu div in id si
   resimoynat("5");//resmin bulunduğu div in id si
}    
</script>
</head>
<body onload=load()>
<div id="3"  style="width:115px;height:115px;background:url(3.png)  no-repeat;"></div>
<div id="4"  style="width:61px;height:61px;background:url(4.png)  no-repeat;"></div>
<div id="5"  style="width:61px;height:61px;background:url(5.png)  no-repeat;"></div>
<script>
</body>
</html>

<html>

<head>

function resimoynat(id,resimsayisi)

{

var img=document.getElementById(id);

var index=0;

var speed=300;

setInterval(function(){

if(index==7)index=0;

img.style.backgroundPosition=(Math.round(index*(100/7)))+"%"+" 0%";

index++;

},speed);

}

function load()

{

resimoynat("3");//resmin bulunduğu div in id si

resimoynat("4");//resmin bulunduğu div in id si

resimoynat("5");//resmin bulunduğu div in id si

}

</script>

</head>

</body>

</html>

Örnek proje indirmek için Tıklayınız.

Tagged with: hareketli-png, hareketli-resim, hareketli-simge, hereketli-gif, javascript