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 回答