Jquery Manşet Uygulaması

Css tanımlamalarını istediğiniz gibi yazabileceğiniz bu uygulama ile web sitenizde istediğiniz gibi manşetler oluşturabilirsiniz. Yapmanız gereken konu içindeki örnek html yapısını uygulamanız yeterli olucaktır.

Uygulama için otomatik hareket edip etmeyeceğini, geçiş süresini, ve ilk önce başlayacağı sırayı ve işaretlenecek li tagının alması gereken css class ismini belirtebilirsiniz, belirtmediğiniz taktirde varsayılan değerler aşşağıda javascrip kodundan bakabilirsiniz.

var defaults = {
    'mansetAuto' : 1,       //1 otomatik, 0 manuel
    'mansetTime' : 2000,    //bekleme süresi
    'mansetLevel' : 0,      //0 ilk görsel, 1 ikinci görsel, 2 üçüncü görsel vs....
    'aktifClass' : 'active' // işaretlenecek li tagının alması gereken css class ismi
}
Copy
 <div class="manset" id="manset">
    <div class="mansetView">

            <div class="mansetSingle">
                 <img src="images/1.jpg" alt="" class="mimg" />
            </div>

             <div class="mansetSingle">
                 <img src="images/2.jpg" alt="" class="mimg" />
            </div>

             <div class="mansetSingle">
                 <img src="images/3.jpg" alt="" class="mimg" />
            </div>

             <div class="mansetSingle">
                 <img src="images/4.jpg" alt="" class="mimg" />
            </div>

             <div class="mansetSingle">
                 <img src="images/5.jpg" alt="" class="mimg" />
            </div>

    </div>
    <ul class="mansetUl bg3g altGolge">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>          
   </ul>
</div>
Copy

yukardaki html kodu içerisindeki css tanımlamalarını istediğiniz gibi değiştirebilirsiniz.

tam olarak html iskeleti alttaki gibidir

 <div class="ornek" id="ornek">

    <div class="zornluDiv">
        <!-- div taglari -->                          
    </div>

    <ul class="zorunluUl">
        <!-- li taglari -->        
   </ul>

</div>
Copy

en dışta bir div veya başka bir html tagı ve içerisinde zorunlu olarak bir div ve bir ul olması gerekmekte. zorunlu olan div içerisinde kaçtane öğe varsa (bu p olabilir div olabilir) o sayıdada ul içerisinde li olması gerekir.

indireceğiniz uygulama içerisinde mavitm.js dosyası manset.js olarak adlandırıp kullanabilirsiniz. bu javascript dosyasını sayfanıza dahil ettikten sonra alttaki şekilde uygulayabilirsiniz.

//id ile 
$("#ornek").maviTmManset();

//class ile 
$(".ornek").maviTmManset();

//parametreleri değiştirmek
$(".ornek").maviTmManset({mansetAuto:1,mansetTime:4000,mansetLevel:4,aktifClass:'secili'}); //her 4 saniyede otomatik hareket edecek ve 5. sıradan başlayacak

//
$(".ornek").maviTmManset({aktifClass:'secili'}); //kaçıncı gösteriliyorsa o sıradaki li tagına .secili class uygulayacak

//
$(".ornek").maviTmManset({mansetAuto:0}); //otomatik hareket etmeyecek
Copy

Ayrıca

Manşet uygulamanız otomatik iken ziyaretçiniz bir manşeti okumak için sayı veya işaretinin mause ile üzerine geldiğinde otomatik mausenin üzerinden çekileceği ana kadar pasif kalıcak ve ziyaretçinin canını sıkmayacaktır.

Manşet numaraları veya işaretleri (siz nasıl tanımlar iseniz) üzerinde mause ile hızlı gezinme yapıldığında bozulma olmayacak ve animasyonlarını kişi hareketlerinin hızı ile etkileşimli gerçekleştirecektir.

Uygulamanın örneğini buradan inceleyebilirsiniz.

Uygulamayı şu adresteki drive alanımdan dosya menüsü indir seçeneği ile bilgisayarınıza indirebilirsiniz.

Yorumlar

Yorum yapmak için giriş yapın

Burda ara

Kategoriler