Türkiye'nin en eski ve aktif online oyun platformu, Ultima Online, Counter-Strike ve diğer online oyunlar hakkında Türkçe haber, bilgi ve forum sunuyor. Türkiye'nin en eski ve aktif online oyun platformu, Ultima Online, Counter-Strike ve diğer online oyunlar hakkında Türkçe haber, bilgi ve forum sunuyor.
  • ANASAYFA
  • ULTIMA ONLINE
    • Ultima Online Oyuncu Rehberi

      Ultima Online Oyuncu Rehberi

      Oyunu hakkında tanıcı bilgiler ve ipuçları

    • Ultima Online Server List

      Ultima Online Server List

      Önemli özellikleri ve online oyuncu sayıları

    • Ultima Online Script

      Ultima Online Script

      Sphere, RunUO, Razor scriptleri

    • Ultima Online Forum

      Ultima Online Forum

      UO hakkında görüş alışverişi

  • FORUM
  • DOKÜMAN
  • İNDİR
  • DISCORD 34
   Üye ol    Giriş
119
  1. Doküman
  2. Webmaster
  3. Thumbnail Hover Efekti (jQuery ile)
Anemon

Thumbnail Hover Efekti (jQuery ile)

  • Anemon
  • 2010-06-03 12:03
  • 1 Yorumlar
  • 2828 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

Değerlendirmeler

0 (0)

0 Kullanıcı

Üye Ol veya Giriş Yap

Bu içeriğe yorum atmak istiyorsanız hemen üye olun veya giriş yapın.

Discord ile Bağlan
Twitch ile Bağlan
Steam ile Bağlan
Google ile Bağlan
Yorumlar (1)
Xandra
Xandra 2010-06-06 23:44

başarılı çalışma ellerine sağlık arkadaşım.

Sadece kayıtlı kullanıcılar yeni yorum yapabilir.


Ultima-Strike Discord
Benzer Sayfalar

Bulunamadı.



  • Son Forumlar
  • Sayfalar
  • TSuN@Mi
    Counter-Strike 1.6 İndir - Tek Link Hızlı-

    Counter-Strike 1 saat önce

  • sarhos7573
    Ev Yapmak istiyorum

    Sphere Scripting 1 gün önce

  • Zerox
    Üyeliği 15 yıl ve üzerinde olanlar.

    Ultima Online 3 gün önce

  • Gökhan Çelikörs
    NightUO

    Sunucular 3 hafta önce

  • HızlıTetık
    Yapay zekayla UO kodlamaya çalışan var mı? Cursor...

    Sphere Scripting 3 hafta önce

  • Vanq
    Discord'a alternatif olarak basit sesli sohbet...

    Off Topic 1 ay önce

  • Furkan Yurtseven
    CS2 Topluluk Sunucumuza Ücretli Yetkili Aranıyor!

    Counter-Strike 2 1 ay önce

  • Nefrelius
    Alcor UO Reborn

    Sunucular 1 ay önce

  • System_Error
    Client Patlaması

    Ultima Online 1 ay önce

  • georgm15
    CS2 turnuvaları tartışmalı başladı.

    Counter-Strike 2 2 ay önce

  • Cihangir algın
    Razor Kullanımı

    RunUo Scripting 2 ay önce

  • Lucretius
    Rampage Pvp

    Sunucular 2 ay önce

  • Lucretius
    Nephilim Pvp

    Sunucular 2 ay önce

  • Cengiz MERDİT
    Sphere 56T Nightly Sürümü

    Ultima Online 3 ay önce

  • aygun
    Esgaroth UO

    Sunucular 3 ay önce

  • Skill seçimlerinizi planlamak artık çok daha kolay

    Ultima Online Karakter Yapılandırma Aracı Bölümü Açıldı!

    2024-10-31 22:47

  • Ultima Online topluluğu, ClassicUO'nun sadece web client olarak kullanılabileceğinin açıklanmasının ardından tepkili.

    Resmi UO, Oyuncuları İkiye Böldü: Web Client Yeterli mi?

    2024-10-14 17:45

  • Ultima Online, ClassicUO ile resmi işbirliği yapıyor! Performans iyileştirmeleri, geniş oyun penceresi ve daha fazlası geliyor.

    Ultima Online, ClassicUO ile Resmi İşbirliğine Gidiyor

    2024-09-26 14:21

  • Centred#

    2024-07-08 22:50

  • CentrED+ 7.9

    2024-07-08 22:34

  • Distance(uzaklık) Sorgusu Hakkında

    2024-06-19 22:05

  • UoFiddler

    2024-06-01 02:19

  • UoFiddler ile Map Kopyalama

    2024-05-31 21:17

Menü
  • ANASAYFA
  • FORUM
  • DOKÜMAN
  • İNDİR
  • İLETİŞİM
  • Bağlantılar
  • CS 1.6 indir
  • CS 1.6 Türkçe
  • CS 1.6 Bot
  • CS 1.6 CFG
  • CS 1.6 Rate Ayarları
  • UO Server
  • Ghost Mouse indir
  • FPS Nedir?
  • Ultima Online PVP Server
  • Makroman
  • UO Karakter Yapılandırma
    © 2004 - 2025 Ultima-Strike. Her hakkı saklıdır.