jQuery ile font büyütme ve küçültme işlemi
1717 görüntüleme

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..

Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz.
biz bunları yapıyoruz ya siz...
© 2016 Bildiklerimiz.Net Tüm hakları saklıdır.