Henüz daha jQuery–Resim örneği yeniden boyutlandırma

Bir istemcinin eski satıcıdan bir web bölümü miras ve görüntü boyutu sorun vardır.  Görüntüleri-meli var olmak 60×50 Ama bazı tuhaf nedenle, özgün satıcısı onları 42 zorla×42, ezilmiş görünüyorlar:

 

İyi görüntü

Kötü görüntü

İşte biçimlendirme (biraz Basitleştirilmiş):

<Masa sınıf 'genişletilmiş-outlook' =>
  <thead>
    <tr>
      <inci  Genişlik ='100′>3 Salı</inci>
    </tr>
  </thead>

  <TBODY>
    <tr sınıf 'tahmin' =>
      <TD genişliği ' 100 =′>
        <ul>
          <li sınıf 'yüksek' =>Yüksek: 72&değ;F</Li>
          <li sınıf 'düşük' =>Düşük: 44&değ;F</Li>
          <li sınıf 'durumu' =>Güneşli
            <img src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/En/Trans/cond007.png’ Genişlik ='42’ Yükseklik ' 42 =’ alt =” />
          </Li>
        </ul>
      </TD>
    </tr>

  </TBODY>

</Tablo>

Olsa bile bu dikkat edeceğiz görüntünün kendisini yolu uygun boyut gösterir (60×50) özgün satıcısı 42 yılında zorla×42.  Neden?  Deli.

Yine de, Bu hızlı ve kolay bir çözüm istedi ve jQuery için döndü.  Hile tüm uygun bulmak için yapıldı. <IMG> Etiketler.  Diğer img etiketleri ile muck istemedim. (var olan birçok).  JQuery bu bit did belgili tanımlık hüner:

<komut dosyası türü = text/javascript"" src ="http://Ajax.googleapis.com/Ajax/libs/jQuery/1.5/jQuery.min.js"></komut dosyası>

<komut dosyası türü "metin/javascript" =>
     $(Belge).hazır(işlevi () {

         $(' li.condition > img').Her(işlevi (Dizin, Madde)
           
{
             $(Madde).CSS("genişliği", "60"); 
             $(Madde).CSS("Yükseklik", "50");
            });
     }); // belge üzerindeki yük
</komut dosyası>

Bu boyutta bir kod koleksiyon bulur <Li> Etiketler sınıftır "durum" ve <IMG> çocuklar.  O zaman bütün bunlar sırayla dolaşır.  Amele beğenmek a çekicilik.

Muhtemelen bu düzene, Ama hiç bir π çözülmüş bir UNIX adam Hedef 18 basamaklı duyarlık kullanarak SED ve awk ve jQuery ya adam ben bu kadar değilim Gülümseme.

</sonunda>

Benim blog abone.

Heyecan beni izleyin http://www.twitter.com/pagalvin

Cevap bırak

E-posta hesabınız yayımlanmayacak. Gerekli alanlar işaretlendi *