Thumbnail Hover Efekti (jQuery ile)

Özellikle flash galerilerde böylesine rastlayabileceğimiz bir çalışma! Üstelik CSS ve Jquery ile yazılan “thumbnail hover efekti”nin sayfadaki görünümü de başarılı duruyor. Soh Tanaka tarafından paylaşılan bu çalışmayı flash galerileri kontrolü sonucunda, benzer efekleri jQuery ve CSS ile hazırladı.

Mevcut çalışmanın kodları aşağıdaki gibidir.

http://sanalduvar.googlepages.com/css-jquery-thum-efekti.jpg

Yapı Kuruluşu – XHTML

Üç sutunlu listeleme basit olacaktır.

  <ul class="thumb"> 
	  <li> <a href="#"> src="thumb1.jpg" alt="" /> </ a> </ p> 
	  <li> <a href="#"> src="thumb2.jpg" alt="" /> </ a> </ p> 
	  <li> <a href="#"> src="thumb3.jpg" alt="" /> </ a> </ p> 
	  <li> <a href="#"> src="thumb4.jpg" alt="" /> </ a> </ p> 
	  <li> <a href="#"> src="thumb5.jpg" alt="" /> </ a> </ p> 
	  <li> <a href="#"> src="thumb6.jpg" alt="" /> </ a> </ p> 
	  <li> <a href="#"> src="thumb7.jpg" alt="" /> </ a> </ p> 
	  <li> <a href="#"> src="thumb8.jpg" alt="" /> </ a> </ p> 
	  <li> <a href="#"> src="thumb9.jpg" alt="" /> </ a> </ p> 
  </ ul> 

 

Şekillendirme – CSS

Listedeki resimlerin görünümü ve durumlarının nasıl olacağının belirlenmesi.

 ul.thumb ( 
	  float: left; 
	  List-style: none; 
	  margin: 0; padding: 10px; 
	  width: 360px; 
  ) 
  ul.thumb p ( 
	  margin: 0; padding: 5px; 
	  float: left; 
	  konum: göreli; / * Set mutlak konumlandırma taban * koordine / 
	  width: 110px; 
	  height: 110px; 
  ) 
  ul.thumb Li img ismiyle bir dizin ( 
	  width: 100px; height: 100px; / * * küçük küçük boyutları ayarla / 
	  -ms-interpolasyon mod: bicubic; / * Fix IE Bicubic Ölçekleme * için / 
	  border: 1px solid # DDD; 
	  padding: 5px; 
	  background: # f0f0f0; 
	  konum: mutlak; 
	  left: 0; top: 0; 
  ) 
  ul.thumb Li img.hover ( 
	  background: (thumb_bg.png) no-repeat merkezi merkezi / * Görüntü duraksamak etkisi üzerinde artalan olarak kullanılacak URL 
	  border: none; / * alın sınırın üstünde uçmak üzerine * kurtulmak / 
  ) 

 

Hayat Vermek – JQuery

Sıra geldi yapılan çalışmaya canlılık katmaya.

$ ( "ul.thumb Li"). sallanmak (function () ( 
	  bu görüntü kalır $ (this). CSS (( 'z-kütüğü':'10 ')); / yüksek bir z-endeks değeri Ekle * * Yukarı / 
	  $ (this)) ( 'img ismiyle bir dizin' bulmak.. addClass ( "sallanmak"). stop (), daha sonra "sallanmak" nin sınıf Ekle * durdurmak animasyon kuyruk buildup * / 
		  . canlandırabiliriz (( 
			  110px ', / * marginTop:' Bir sonraki 4 hat dikey * Bu görüntü hizalamak olacak / 
			  marginLeft: '-110px', 
			  top:'50% ', 
			  Sol:%'50 ', 
			  genişlik:'174px ', / * Set yeni genişliği * / 
			  height:'174px ', / * Set yeni yükseklik * / 
			  padding:'20px ' 
		  200 of "), 200); / * Bu değeri" ne kadar hızlı ve hızla bu duraksamak yavaş * animates / 

	  ), Function () ( 
	  $ (this). CSS (( 'z-kütüğü':'0 ')); / * Z-INDEX geri 0 * Set / 
	  $ (this)) ( 'img ismiyle bir dizin' bulmak.. removeClass ( "sallanmak"). durdurmak () / * çıkarın "sallanmak" sınıf, daha sonra animasyon kuyruk buildup * durdurmak / 
		  . canlandırabiliriz (( 
			  marginTop:'0 ', / * Set hizalamayı geri * varsayılan / 
			  marginLeft:'0 ', 
			  top:'0 ', 
			  left:'0 ', 
			  genişlik:'100px ', / * Set genişliği geri * varsayılan / 
			  height:'100px ', / * Set yüksekliği geri * varsayılan / 
			  padding:'5 piksel ' 
		  ), 400); 
  )); 

Çalışmanın demosunu görmek için burayı tıklayın.

Kaynak bilginin orjinaline buradan ulaşabilirisiniz. Bu çalışmayı bizimle paylaştığı için Soh Tanaka’ya teşekkür ederiz. Thanks for this work, Soh.

Veysel

Veysel

Sosyal Medya ve İnternetteki gelişmeleri inceleyen, Web Tasarım Araçları, CMS(İçerik Yönetim Sistemi)leri, özellikle WordPress üzerine haberleri araştıran, 2007 yılında yayın hayatına başlayan SanalDuvar.Com'un yöneticisidir. Ana Bilim Dalı Elektrik-Elektronik Mühendisliği olan bir Sistem Mühendisidir.

İlginizi çekebilir...

1 Response

  1. Avatar web tasarım dedi ki:

    Umarım paylaşımı arttırır 🙂

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir