Duyuruyu Kapat
Facebook Gözat
Twitter Gözat

setInterval degiskeni

Konu, 'Javascript' kısmında ekol tarafından paylaşıldı.

  1. ekol

    ekol Üye

    Kayıt:
    16 Mayıs 2010
    Mesajlar:
    67
    Beğenilen Mesajlar:
    0
    Merhaba; yine ben:)Amator bir projem icin yardimlariniza ihtiyacim var. setInterval metodu iceren bir javascript kod var elimde, ancak kodun islevi farkli url adreslerinden resimleri döndürmesi, ben ise tek bir url adresinde yer alan farkli imajlari koordinatlarini belirtmek suretiyle, (backgroundPosition="-0px -0px";) < tarzinda ayni islevi gerceklestirmesini istiyorum. Baya arastirmama ragmen cazip bir ornek bulamadim. Uzerinde degisken uygulamaya musait kod blogunu(farkli url adreslerinden ceken), ilgili resmi ve backgroundPosition degerlerini alt alta asagida veriyorum.
    Kod:
    <div id="container" style="border: 1px solid red; width: 500px; height: 500px">
    <script type="text/javascript">
        setInterval((function(images)
        {
            var index = -1, changeImage;
            changeImage = function()
            {
                index = (index + 1) % images.length;
                document.getElementById('container').style.backgroundImage = 'url(' + images[index] + ')';
            };
            changeImage();
            return changeImage;
        }([
            'images/ft_horse.png',
            'images/ft_angus.png',
            'images/ft_bh.png',
            'images/ft_rice.png'
        ])), 30000);
    </script>
    
    [​IMG]


    this.style.backgroundPosition="-0px -212px"
    this.style.backgroundPosition="-149px -212px"
    this.style.backgroundPosition="-298px -212px"
    this.style.backgroundPosition="-447px -212px"
    this.style.backgroundPosition="-596px -212px"
    this.style.backgroundPosition="-0px -424px"
    this.style.backgroundPosition="-149px -424px"
    this.style.backgroundPosition="-298px -424px"
    this.style.backgroundPosition="-447px -424px"
    this.style.backgroundPosition="-596px -424px"


    (Pozisyonlar konusunda yaniliyor da olabilirim ama muhtemelen boyledir. Yardimlariniz icin tesekkurler.)
     
  2. bölünmez

    bölünmez Aktif Üye

    Kayıt:
    10 Kasım 2008
    Mesajlar:
    264
    Beğenilen Mesajlar:
    0
    Tek tek koordinat girmek yerine şunun gibi bir şey yapabilirisin:
    PHP:
    <html>
    <
    style type="text/css">
    #dnm {background-image:url(http://www.hizliupload.com/di-WPIH.jpg);width:148px;height:220px;background-position:0% 0%}
    </style>
    <
    script type="text/javascript">
    function 
    oynat(){
    var 
    x=0;y=0;
     
    setInterval(function(){
       
    x+=25;
       
    document.getElementById('dnm').style.backgroundPosition=x+'% '+y+'%';
     },
    100);
    }
    </script>
    <body>

    <div id="dnm" onclick="oynat()"></div>

    </body>
    </html>



     
  3. ekol

    ekol Üye

    Kayıt:
    16 Mayıs 2010
    Mesajlar:
    67
    Beğenilen Mesajlar:
    0
    Kod hem cok ilginc hemde cok basarili, yardimin ve paylasimin icin tesekkurler, resimler inanilmaz bir bicimde dönuyor, yani bunu nasil basardin, bravo diyorum. :) Ancak islevsel ozelligi bakimindan olmasini istemedigim turden bazi seyler gordum. Bunlar;
    1- Dönme esnasinda imajlar sol tarafa dogru kayiyor, sanki sistemli, planli ve programli bir sekilde, resimler hem dönup hemde sabit kalirsa mukemmel olacak. :garip::)
    2-div icinde yer alan onclick 'e her tiklandiginda o donme islemi acaip bir sekilde karmasik bir hal alarak hizlaniyor, saniyorum burda koordinatlari cekme esnasinda extra tiklamalardan dolayi boyle bir hizlanma, karisma gibi bir hata oluyor, anlayamadim. http://camfroggazete.tr.gg/setInterval-degiskeni-k1-Test-k2-.htm (Önizleme)
     
  4. bölünmez

    bölünmez Aktif Üye

    Kayıt:
    10 Kasım 2008
    Mesajlar:
    264
    Beğenilen Mesajlar:
    0
    Farkındayım, fikir vermek amacıyla yazdığım için uyarlamak ve geliştirmek sana kalmış. Örneğin şu anda sadece ilk beş resim oynatılmakta; bu da bir sorun. :)
    Resimlerin yana kayması aslında resmin kendisi yüzünden. Çünkü her resim arasında 1-2px boşluk bırakılmış olmasına rağmen, tuvalle resimler arasında aynı genişlikte boşluk bırakılmamış. Bu kod her resmin özdeş olması ilkesine dayandığı için, her dönüşte 4-8px kayma oluyor.
     
  5. ekol

    ekol Üye

    Kayıt:
    16 Mayıs 2010
    Mesajlar:
    67
    Beğenilen Mesajlar:
    0
    İlk ornekte(#1) verilen kod blogunda, herhangi bir click yapmaksizin islevi olan dondurme olayi gerceklesiyor, sizin verdiginiz ornekte ise bir onclick mevcut, ilk ornekte(#1) oldugu gibi onclik olmadan yapilmasi mumkunmudur? Son olarak sizin bahsetmis oldugunuz hatalarin bir kismini duzeltmeye calistim. (#3) 'te bulunan (Önizleme) 'den incelermisin?
     
  6. ekol

    ekol Üye

    Kayıt:
    16 Mayıs 2010
    Mesajlar:
    67
    Beğenilen Mesajlar:
    0
    Bir ust mesajima cevap gelmedi ?
    Son olarak;
    <input type="text" id="ara" name="ara" value[FONT=monospace]="[FONT=monospace]Ara[COLOR=#881280][FONT=monospace]" [FONT=monospace]onfocus[COLOR=#881280][FONT=monospace]="[FONT=monospace]if(this.value=='Ara'){this.value=''; this.style.backgroundColor='#efefef'};[COLOR=#881280][FONT=monospace]" [FONT=monospace]onblur[COLOR=#881280][FONT=monospace]="[FONT=monospace]if(this.value==''){this.value='Ara'; this.style.backgroundColor='#ffffff'};[COLOR=#881280][FONT=monospace]" />
    [FONT=monospace]Kirmizi renkli bolumde belirttigim renk kodunun yerine şu [IMG]http://www.hizliupload.com/di-0XZO.jpg[/IMG] fotografi ne yaptiysam ekleyemedim. [B]background:url([/B] , [B]background-image:url([/B] filan ne denediysem olmadi. Yardimci olurmusunuz ?[/FONT][/FONT][/COLOR][/FONT][/FONT][/COLOR][/FONT][/FONT][/COLOR][/FONT][/FONT][/COLOR][/FONT][/FONT][/COLOR][/FONT][/FONT]
     
  7. ekol

    ekol Üye

    Kayıt:
    16 Mayıs 2010
    Mesajlar:
    67
    Beğenilen Mesajlar:
    0