Thumbnail Hover Efekti (jQuery ile)

Anemon
2010-06-03 12:03
1 Yorumlar
2888 Görüntüleme

Ö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.

<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