SEO (Arama Motoru Optimizasyonu) Mikro İnteraktif ÜCRETSİZ - Google Play'den İndirin

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

Yorum Yaz

Avatar

REKLAM

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

REKLAM

Çizgi Filmler

REKLAM

Çocuk Etkinlikleri Uygulaması

EN

  • Popüler
  • Yeni
  • Son Yorum