01.10.2014 ,
1 yorum ,
5.348 kez okundu.
Web sayfalarını tasarlarken tasarıma ne kadar önem veriyorsak tabiki kullanıcı kolaylığını da düşünmemiz gerekiyor. İnteraktif siteler tasarlamamız gerekiyor. Bu anlamda sayfamızda olması gereken özelliklerden birtanesi de yazıların boyutlandırılabilmesi. Kullanıcı yazıyı istediği font büyüklüğünde görüntüleyebilmeli. Bunun için bu paylaşımımda jQuery ile nasıl kolayca font büyütebileğimizi anlatmaya çalışacağım.
Öncelikle sayfamızın body etiketini kapatmadan önce jQuery kütüphanesini ekleyelim:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>Ardından sayfamıza yazılarımızı büyütmek için bir link ve deneme yazısı ekleyelim:
<a href="#" id="buyut">Yazıyı büyüt</a>
<p class="buyutulecekyazi" style="font-size:15px;">Bu bir deneme metnidir</p>Bu kodları sayfamızın body kısmına girmemiz gerekiyor. Burada Yazıyı büyüt linkinin id`sini buyut olarak girdik.Deneme metnimizin stil değerlerinde ise font büyüklüğünü 15px olarak girdik. Deneme metninin sınıfını da buyutulecekyazi olarak girdik. Şimdi jQuery ile .css() fonksiyonunu kullanarak buyut id`li linke tıklanınca buyutulecekyazi sınıfındaki yazıları büyütmek için kod yazmamız gerekiyor:
<script>
$(document).ready(function(){
$("#buyut").click(function(event){
$(".buyutulecekyazi").css({"font-size":"20px"});
});});
</script>Buraya kadar yazdığımız kodlar aslında işimizi görüyor. Deneme yaparsanız buyutulecekyazi sınıfındaki yazılarımız buyut id`li linke tıklanınca büyüyor. Fakat bir de şu işlemi kullanıcıya daha güzel bir şekilde sunmak istiyorsak hareketli bir şekilde büyümesi için kodlarımızda ufak bir değişiklik yapmamız gerekiyor. Bunun için jQuery kütüphanesinden .animete() fonksiyonunu kullancağız:
<script>
$(document).ready(function(){
$("#buyut").click(function(event){
$(".buyutulecekyazi").animate({"font-size":"20px"},1000);
});});
</script>İşte bu kadar!
Uygulamayı denemek için aşağıdaki linki kuallanabilirsiniz.
