0

私はレスポンシブ サイトを作成し、いくつかの JS コードを使用して画像にキャプションを作成しましたが、これは正常に機能しますが、ブラウザーのサイズを変更すると. 画像は本来のように拡大縮小されません.JSで高さの値が指定されているためだと思います. この値を削除してキャプションを機能させるにはどうすればよいですか?

$(window).load(function(){ 
   // For each instance of p.caption
   $("p.caption").each(function(){
     $(this)
        // Add the following CSS properties and values
        .css({
             // Height equal to the height of the image
            "height" : $(this).children("img").height() + "px",
            // Width equal to the width of the image
            "width" : $(this).children("img").width() + "px"
        })
        // Select the child "span" of this p.caption
        // Add the following CSS properties and values
        .children("span").css(

            // Width equal to p.caption
            // But subtract 20px to callibrate for the padding
            "width", $(this).width() - 20 + "px")

        // find the <big> tag if it exists
        // And then add the following div to break the line
        .find("big").after('<div class="clear"></div>');

        // When you hover over p.caption
        $("p.caption").hover(function(){

            // Fade in the child "span"
            $(this).children("span").stop().fadeTo(400, 1);
            }, function(){
            // Once you mouse off, fade it out
            $(this).children("span").stop().delay(600).fadeOut(400);
        });
    // End $(this)   
    });
});
4

2 に答える 2

1

window.resize を試してみるべきだと思います。

$(window).resize(function() {
    $("p.caption").each(function() {
        var item = $(this);
        var big = item.find("big");

        item.css({
            "height" : item.children("img").height() + "px",
            "width" : item.children("img").width() + "px"
        }).children("span").css("width", item.width() - 20 + "px");
    });
});

私はあなたのコードをリファクタリングし、フィドルを作成しました:

http://jsfiddle.net/VinnyFonseca/6Kv9U/1/

于 2013-03-18T21:34:12.557 に答える
0

jQuery.resize()これを解決しますhttp://api.jquery.com/resize/

その手続き型コードを保存して再実行可能（関数）にし、相対（親）DOMディメンションに基づいて再トリガーする必要があります。

'use strict';

removeHeight(){
    // That code here
}

$(document).ready(function(){
    // Initial removal
    removeHeight();

    // Removal when resizing
    $(window).resize(function() { removeHeight() });
});
于 2013-03-18T21:27:17.213 に答える