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 36
   Üye ol    Giriş
236
  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
  • 2804 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
  • Arizone
    Üyeliği 15 yıl ve üzerinde olanlar.

    Ultima Online 3 gün önce

  • Nefrelius
    Alcor UO Reborn

    Sunucular 1 hafta önce

  • System_Error
    Client Patlaması

    Ultima Online 1 hafta önce

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

    Counter-Strike 2 2 hafta önce

  • georgm15
    Counter-Strike 1.6 İndir - Tek Link Hızlı-

    Counter-Strike 2 hafta önce

  • Cihangir algın
    Razor Kullanımı

    RunUo Scripting 4 hafta önce

  • Lucretius
    Rampage Pvp

    Sunucular 1 ay önce

  • Lucretius
    Nephilim Pvp

    Sunucular 1 ay önce

  • redi4817
    NightUO

    Sunucular 1 ay önce

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

    Ultima Online 1 ay önce

  • aygun
    Esgaroth UO

    Sunucular 1 ay önce

  • deonist
    Alysa Pvp ( Aktif ! )

    Sunucular 1 ay önce

  • mthN
    Nebula Uo gerçekleri

    Ultima Online 2 ay önce

  • buffa
    Kullanılması Gereken Rate Ayarları

    Counter-Strike 2 ay önce

  • Lucretius
    Aktif Satılık Server !

    Sunucular 2 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.