jQuery ile Resimlere “Soldurma” Efecti Verme #Videolu Anlatım

21.04.2012 18:52

ErenKeskin Girişimci, Front-end Developer Kullanıcı

Üyelik 11.09.2011
Yaş/Cinsiyet 29 / E
Meslek Elektrik-Elektronik Mühendisi
Konum Eskişehir

Ad Soyad E** K**
Mesajlar 1223
Beğeniler 243 / 336
Ticaret 2, (%100)

Aslında buna güzel bir başlık uyduramadım ancak en mantıklı şekilde bu çıktı. Yapacağımız işlemi WMAraci.com’da Uğur Dalkıran arkadaşım sormuş. Bir resimin üzerine geldiğimizde resim solacak ve resmin ortasında bir arama ikonu görünecek. Olayın mantığı bu ve yapmaya başlayabiliriz artık. Not olarak söyleyeyim konunun altında videolu anlatım mevcuttur, eğer yazılı anlatımı anlamazsanız videoyu inceleyebilirsiniz.

jQuery dosyalarını çağırmayı falan ilk derste anlatmıştım onun için geçiyorum. İlk olarak bir alan oluşturup içerisine resimimizi ve mouse ile üzerine geldiğimizde görünmesini istediğimiz alanı HTML ile yazıyoruz.

Bunlara CSS ile şekil veriyoruz.

img{cursor: pointer;}

#alan {width: 310px; margin: 50px auto; position: relative;}

.hover{display: none; background: url(img/incele.png)no-repeat; width: 26px; height: 26px; position: absolute; top: 90px; left: 140px;}

Geriye işin en güzel kısmı kaldı “jQuery”. Aslında çok basit bir ama bilmek gerekiyor. Ben jQuery derslerinde daha .animate() metoduna gelmedim ancak burada kullandım onun için burayı anlamayan arkadaşlar biraz araştırabilirler.

$("img").hover(function(){

$(this).animate({

"opacity" : "0.3"

});

$(".hover").fadeIn();

},function(){

$(this).animate({

"opacity" : "1"

});

$(".hover").fadeOut();

});

Kodlarda önce resmimizin üzerine geldiğimizde “opacity” sini düşürdük ve .hover classımızı aktif ettik. Ardındanda mouse’umuzu üzerinden çektiğimizde bunların geri eski hala dönmesini sağladık. Mantık sadece bundan ibarek.

Demo: jQuery ile Resme “Soldurma” Efect’i Verme
İndir: jQuery ile Resme “Soldurma” Efect’i Verme dosyaları

herenkeskin.com - Elektrik ve Elektronik Mühendisi - Gömülü Sistemler üzerine çalışıyorum.

21.04.2012 19:08

#2

dlkrnugur JS Coder Kullanıcı

Üyelik 20.11.2011
Yaş/Cinsiyet 28 / E
Meslek PHP Coder
Konum Muğla

Ad Soyad U** D**
Mesajlar 1069
Beğeniler 210 / 209
Ticaret 41, (%98)

Çok teşekkürler Eren! :)

1 kişi bu mesajı beğendi.

21.04.2012 19:11

#3

CpanelX Üyeliği Durdurulmuş Banlı Kullanıcı

Üyelik 20.04.2012
Yaş/Cinsiyet - / E
Meslek Teknisyen
Konum

Ad Soyad ** **
Mesajlar 85
Beğeniler 4 / 7
Ticaret 0, (%0)

üstüne geldigimde tekrar resime donuyor

21.04.2012 19:13

#4

ErenKeskin Girişimci, Front-end Developer Kullanıcı

Üyelik 11.09.2011
Yaş/Cinsiyet 29 / E
Meslek Elektrik-Elektronik Mühendisi
Konum Eskişehir

Ad Soyad E** K**
Mesajlar 1223
Beğeniler 243 / 336
Ticaret 2, (%100)

o ikonun üzerine geldiğinizde tekrarlıyor. Orayı düzeltmeyi unuttum ama kendiniz yapabilirsiniz.

herenkeskin.com - Elektrik ve Elektronik Mühendisi - Gömülü Sistemler üzerine çalışıyorum.

22.04.2012 10:28

#5

erbilen Üyeliği Durdurulmuş Banlı Kullanıcı

Üyelik 24.11.2011
Yaş/Cinsiyet - / E
Meslek
Konum

Ad Soyad ** **
Mesajlar 226
Beğeniler 6 / 201
Ticaret 0, (%0)

aslında opacity yerine direk fadeTo metodu ile daha mantıklı bana kalırsa :)

22.04.2012 20:02

#6

ErenKeskin Girişimci, Front-end Developer Kullanıcı

Üyelik 11.09.2011
Yaş/Cinsiyet 29 / E
Meslek Elektrik-Elektronik Mühendisi
Konum Eskişehir

Ad Soyad E** K**
Mesajlar 1223
Beğeniler 243 / 336
Ticaret 2, (%100)

Aslında daha mantıklı :) buraya kadar olan jQuery bilgimi senden öğrenmiştim bir şey daha öğrenmiş oldum Tayfun :)

herenkeskin.com - Elektrik ve Elektronik Mühendisi - Gömülü Sistemler üzerine çalışıyorum.

23.04.2012 15:56

#7

Ogulcan (K)af(S)in(K)af Kullanıcı

Üyelik 28.01.2011
Yaş/Cinsiyet 30 / E
Meslek -
Konum İzmir

Ad Soyad O** T**
Mesajlar 2185
Beğeniler 165 / 388
Ticaret 13, (%100)

Teşekkürler.Jquery'i nereden öğreniyorsun Eren?

Ogulcann.com | SosyoKişisel Web Blogu

23.04.2012 16:39

#8

ErenKeskin Girişimci, Front-end Developer Kullanıcı

Üyelik 11.09.2011
Yaş/Cinsiyet 29 / E
Meslek Elektrik-Elektronik Mühendisi
Konum Eskişehir

Ad Soyad E** K**
Mesajlar 1223
Beğeniler 243 / 336
Ticaret 2, (%100)

İnternetteki kaynakları inceliyorum. Ayrıyeten temel bilgi için prototürk'ü tek geçerim.

herenkeskin.com - Elektrik ve Elektronik Mühendisi - Gömülü Sistemler üzerine çalışıyorum.

23.04.2012 20:11

#9

EmPa GRAFİKER & Bilgisayar Müh Kullanıcı

Üyelik 08.09.2011
Yaş/Cinsiyet 29 / E
Meslek Öğrenci
Konum Elazığ

Ad Soyad K** P**
Mesajlar 539
Beğeniler 93 / 86
Ticaret 0, (%0)

yav ben bi türlü yapamadım olmuyor! Eren Yardım edermisin

KEP Creativity | Digital Agency

23.04.2012 22:08

#10

ErenKeskin Girişimci, Front-end Developer Kullanıcı

Üyelik 11.09.2011
Yaş/Cinsiyet 29 / E
Meslek Elektrik-Elektronik Mühendisi
Konum Eskişehir

Ad Soyad E** K**
Mesajlar 1223
Beğeniler 243 / 336
Ticaret 2, (%100)

EmPa adlı üyeden alıntı

yav ben bi türlü yapamadım olmuyor! Eren Yardım edermisin

Sanırım yardımcı oldum :)

herenkeskin.com - Elektrik ve Elektronik Mühendisi - Gömülü Sistemler üzerine çalışıyorum.

jQuery ile Resimlere “Soldurma” Efecti Verme #Videolu Anlatım

Üye Girişi Yap