Basit jQuery Uygulamaları Yazıyoruz : Resimlere Hover Efekti Uygulama
Merhaba Arkadaşlar,
Eğitim serimizin bu makalesinde de örneklerimize devam ediyoruz. Css içerisinde Sprite şeklinde nitelendirdiğimiz ve resim üzerine mouse imlecini getirdiğimizde resmin bir efekt ile hareketlendirilmesini sağlayan sistemi bugün uygulamamızda göreceğiz. Ancak bunu css yerine jQuery Animate metodu ile uygulayarak daha güzel bir efekt sağlayacağız. İşlemlerimize başlarken ilk olarak kendinize hover efekti uygulayacağınız bir resim edinin veya makalenin altında ki indirme yolundan dosyaları indirerek benim kullandığım resmi alın.
Klasörümüz içerisinde www.jquery.com içerisinden indirdiğimiz son sürüm jQuery kütüphanesini , index.html isimli web sayfasını ve hover efekti uygulayacağımız resmi bulundurarak işlemlerimize başlıyoruz. HTML sayfamızın kodlarını yazarak ilk olarak iskeletimizi oluşturuyoruz ve jQuery kütüphanesini sayfaya çağırıyoruz. Kodlarımızın ilk görünümü şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulamaları</title>
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
</body>
</html>
Şimdi sayfamıza resmimizi ekliyoruz ve resmimize bir class atıyoruz.
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulamaları</title>
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<img src="images.jpg" class="resim" />
</body>
</html>
Sıradaki işlemde ise hover efekti için ilk olarak resmimizin ” Opacity ” değerini CSS yardımı ile düşüreceğiz. Bunu yapmamızın sebebi ilk olarak mat görünümde karşımıza çıkacak olan resim Hover işlemi yapıldığında ise orjinal görüntüsüne bürünmüş olacaktır. CSS kodu yazılmış hali ile kodlarımızın son görüntüsü şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulamaları</title>
<script src="jquery-1.9.1.min.js"></script>
<style>
.resim{opacity: 0.5}
</style>
</head>
<body>
<img src="images.jpg" class="resim" />
</body>
</html>
Şu an ki hali ile sayfamızı çalıştırdığımızda mat görünümü ile resmimizi göreceğiz. Bu görüntüyü aldıktan sonra makalemizin ana konusuna dönüyoruz ve jQuery ile resim üzerinde Hover işlemi gerçekleştirildiği anda yapılacak değişiklikleri ” animate ” metodunu kullanarak görüyoruz. Kodlarımızın açıklama satırları ile birlikteki son görünümü şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulamaları</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
//Resim Class'ı üzerinde Hover Yapıldığı Anda'
$(".resim").hover(function(){
//Bu nesnenin Opacity Değerini Tam görünür bir şekle getir
$(this).animate({"opacity":"1"});
},function(){
//Hover işlemi kaldırıldığı anda eski haline çevir..
$(this).animate({"opacity":"0.5"});
})
});
</script>
<style>
.resim{opacity: 0.5}
</style>
</head>
<body>
<img src="images.jpg" class="resim" />
</body>
</html>
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 38 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar