jQuery ile Kayan Haber Yapımı Örnek 1

Bu jQuery makalemizde basit ve kullanışlı kayan haber yapımını sizlerle paylaşacağız. Temel düzeyde CSS şekillendirmesi yapılmıştır.

Evet arkadaşlar, web sayfalarınızda kullanabileceğiniz efektif bir kayan haber uygulamasının öncelikle CSS betiklerini yazalım.
CSS Betiklerimiz
        *{padding:0px;margin:0px;font-weight:normal;font-size:inherit;border:none;border-spacing:0px;}
        body{font-family:Arial, Helvetica, sans-serif;background:#F5F5F5;font-size:12px;}
        .kapsul{width:200px;min-height:1px;margin:10px auto;}
        ul.haberler{list-style-type:none;width:200px;height:100px;overflow:hidden;background-color:#DDDDDD;}
        ul.haberler li{display:block;width:200px;height:100px;padding:2px;}
        h2{color:#6B6B6B;font-size:18px;margin-bottom:4px;}

Şimdi ise dinamikliği sağlayacak olan jQuery betiklerimizi yazalım.
jQuery Betiklerimiz
    function fnHaber_Kaydir() {
        $('.haberler li:first').slideUp(function () {
            $(this).appendTo($('.haberler')).slideDown(1000);
        });
    }
    setInterval(function(){fnHaber_Kaydir()}, 6000);

Uygulamamızın HTML tarafını yazalım
HTML Betiklerimiz
    <div class="kapsul">
        <ul class="haberler">
            <li>
                <h2>Haber 1</h2>
                <p>Birinci haberin içeriği burada yer alıyor.</p>
            </li>
            <li>
                <h2>Haber 2</h2>
                <p>İkinci haberin içeriği burada yer alıyor.</p>
            </li>
            <li>
                <h2>Haber 3</h2>
                <p>Üçüncü haberin içeriği burada yer alıyor.</p>
            </li>
        </ul>
    </div>
Örnek
jQuery ile Kayan Haber Yapımı Örnek 1

Yorumlar

  • Master

    Master:

    2 yıl önce

    Eyvallah sağolasın çöplük olmuş Google`da, her şeyi ctrl c ctrl v yapan yeni nesilde bu işime çok yaradı teşekkürler.
    3 cevapla
  • Yönetici Yorumu:

    Güle güle kullanın.
  • Yavuz Selim

    Yavuz Selim:

    2 yıl önce

    Bulunmaz nimet diyebilirim değerini bilenler için hocam emeğinize sağlık.
    2 cevapla
  • Windofelm

    Windofelm:

    3 yıl önce

    On numara beş yıldız hocam:)
    9 cevapla
  • Yönetici Yorumu:

    İşinize yaradıysa ne mutlu bize.

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

EN

  • Popüler
  • Yeni
  • Son Yorum