Merhaba arkadaşlar,

Bugün sizlere jquery ile yazı fontu büyütme ve küçültme işleminin nasıl yapılacağını anlatacağım. Bunun için öncelikle jquery kütüphanemizi yüklüyoruz. Ve aşağıdaki kodlarımızı yazıyoruz.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
    <script type="text/javascript">
        $(function () {
            $(".font-button").bind("click", function () {
                var size = parseInt($('.yazialan').css("font-size"));
                if ($(this).hasClass("plus")) {
                    size = size + 2;
					  if (size >= 20) {
                        size = 20;
                    }
									
                } 
				
				else {
                    size = size - 2;
                    if (size <= 10) {
                        size = 10;
                    }
					
					
                }
				
				
                $('.yazialan').css("font-size", size);
            });
        });
    </script>

 <a class="font-button plus">A+</a> <a class="font-button minus">A-</a>

Yukarıdaki kodumuzda metinlerimizin .yazialan ile belirttiğimiz class'ın içinde olması gerekmektedir. Fontların küçültülmesi ve büyütülmesinde istediğimiz sınırı koyabilmektiyiz. Size <=10 ile küçültme sınırımızı >=20 büyüklük sınırımızı koyduk. Sizde istediğiniz sınırları koyabilirsiniz veya bu sınırları kaldırıp sınırsız büyütme ve küçültme seçeneği ile kullanabilirsiniz.

İyi çalışmalar..

Mehmet Fe

3752 görüntüleme

jQuery

Yorumlar

Adınız Soyadınız

Mail Adresiniz

Doğrulama Kodu