0

HTML と CSS についてはよく知っていますが、jQuery の学習曲線はまだかなり早い段階にあります。

内部の画像のサイズに基づいて、いくつかの DIV のさまざまなプロパティを設定する必要があります。

サンプル HTML を次に示します。

<div class="box">
<img src="../pix/onepic.gif">
</div>

そして、ここに私が知っている機能があります：

$('.box').click(function() {            
    var obj = $(this);
    var imgWidth = $('img:first', obj).width();
    var imgHeight = $('img:first', obj).height();

    $(this).width(imgWidth * 2);
    $(this).height(imgHeight * 2);
    });

しかし、クリックしたときだけでなく、さまざまなサイズの画像を含む多数の .box がある場所で、この関数をページ全体で自動的に実行したいと考えています。

とりわけ、上記のサンプルの「クリック」を「ロード」に置き換えると、すべてがうまくいきます。

最初は、「each」を使用するという以下の提案が機能しているように見えました。このスクリプトを配置すると：

$('.box').each(function() {            
    var obj = $(this);
    var imgWidth = $('img:first', obj).width();
    var imgHeight = $('img:first', obj).height();
    $(this).width(imgWidth * 2);
    $(this).height(imgHeight * 2);
});

body-close タグの前に、私が望んでいたものを手に入れました。

しかし、HTMLを次のように変更して、さらにテストしました。

<div class="box">
<p>hello world</p>
<img src="../pix/onepic.gif">
</div>

Firefox、Chrome、および IE では、まったく異なる 3 つの結果が得られました。

Firefox には、私が期待していたもの、Hello World と、拡大されたボックス内の画像があります。

Chrome では、div の高さと幅が 0px になりました。

IE7 では、div の幅は 56 ピクセル、高さは 60 ピクセルになりましたが、理由はわかりません。問題の画像は 100x100 です。

4

2 に答える 2

2

jQuery の each()関数を使用する

$('.box').each(function() {            
    var obj = $(this);
    var imgWidth = $('img',obj).width();
    var imgHeight = $('img',obj).height();

    $(this).width(imgWidth * 2);
    $(this).height(imgHeight * 2);
});
于 2012-07-06T08:01:15.073 に答える
0

imagesLoaded プラグインhttps://github.com/desandro/imagesloadedを使用して、 これを行うためのきちんとした方法を見つけました。

$('.element').imagesLoaded().progress( function( instance , image) {

    newHeight = $(image.img).height();

    $(image.img.parentNode).height(newHeight);

});

この単純な関数は、imagesLoaded 'progress' 関数を利用します。この関数は、指定されたコンテナー内のすべての画像を繰り返し処理し、読み込まれたことが確認されると、それらを 1 つずつユーザーに渡します。

コンテナー、イメージ、およびイメージの状態 (読み込みに失敗) などにアクセスするには、さまざまな方法があります。

チェックアウトすることをお勧めします:-)

于 2013-10-08T16:36:09.383 に答える