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.

Yapı Kuruluşu – XHTML
Üç sutunlu listeleme basit olacaktır.
[sourcecode language='php']

• src=”thumb1.jpg” alt=”" />
• src=”thumb2.jpg” alt=”" />
• src=”thumb3.jpg” alt=”" />
• src=”thumb4.jpg” alt=”" />
• src=”thumb5.jpg” alt=”" />
• src=”thumb6.jpg” alt=”" />
• src=”thumb7.jpg” alt=”" />
• src=”thumb8.jpg” alt=”" />
• src=”thumb9.jpg” alt=”" />
  
  [/sourcecode]
  Şekillendirme – CSS
  
  Listedeki resimlerin görünümü ve durumlarının nasıl olacağının belirlenmesi.
  [sourcecode language='css']
  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 /
  )
  [/sourcecode]
  
  Hayat Vermek – JQuery 
  
  Sıra geldi yapılan çalışmaya canlılık katmaya.
  [sourcecode language='php']
  $ ( “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);
  ));
  [/sourcecode]
• 
  Ç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.