Question

标题几乎解释了我的大部分问题。我将提供一些背景信息。

我有这样的事情。（简化的）

<ul>
<li><img src="image1.jpg"/></li>
<li><img src="image2.jpg"/></li>
<li><img src="image3.jpg"/></li>
</ul>

每个li都是水平平铺的。像这样：

 [   ][   ][   ][   ]

所以我已经有了这个脚本，可以拉伸图像高度并保持纵横比。但现在我需要一个脚本，即使在浏览器调整大小后，它也会动态获取所有图像（或li）的宽度。根据我的理解，我需要像事件冒泡或某种授权这样的东西。我不知道如何继续这个jQuery之旅。

图片链接到我正在谈论的不同浏览器设置

正常浏览器高度

http://f.cl.ly/items/1O3w3M3l3b3a0z2B0U1w/image1.jpg

降低浏览器高度

http://f.cl.ly/items/3y3K38243J063J1U2f1P/image2.jpg

Answer 1

您必须加入resize事件：

$(window).resize(function(){
    $('li img').each(function(){
        console.log( $(this).width() );
    });
});

如果您希望它也在页面加载时触发，请自行触发resize事件：

$(window).resize(function(){
    $('li img').each(function(){
        console.log( $(this).width() );
    });
})
.resize();

这是小提琴：http://jsfiddle.net/39JFQ/

如果您需要所有宽度的总和，请使用：

$(window).resize(function(){
    var totalWidths = 0;

    $('li img').each(function(){
        totalWidths += $(this).width();
    });

    console.log(totalWidths);
})
.resize();

这是小提琴：http://jsfiddle.net/39JFQ/2/

您显然应该用更具体的内容替换li img选择器。

Answer 2

您需要为窗口调整大小事件创建一个事件处理程序：

$(window).resize(function(){
  $('li').each(function(){
    var width = $(this).width();
    if(width > large){
      $(this).find('img').attr('src', 'largeImage.jpg');
    }else{
      $(this).find('img').attr('src', 'smallImage.jpg');
    }
  });
});

您是否考虑过媒体查询？ http://www.w3.org/TR/css3-mediaqueries/

Answer 3

您确定需要JavaScript吗？为什么不使用responsive CSS以便图像适应：

img {
  width: inherit;  /* This makes the next two lines work in IE8. */
  max-width: 100%; /* Add !important if needed. */
  height: auto;    /* Add !important if needed. */
}

并在容器上使用百分比宽度。

要在jQuery中执行此操作，您需要将一个处理程序附加到resize事件。使用ways described here之一或使用下面Response的示例。我使用$.data来存储宽度数据。

Response.action( function () {
    // Code in here runs on ready and on resize:
    $.each($('img'), function() {
        // Get width of element each element:
        var currentWidth = $(this).width(); 
        // Store for access where you need it:
        $.data( this, 'lastWidth', currentWidth ); 
    });//each
});//action

请参阅：responsejs.com/labs/dimensions/。

jQuery在浏览器调整大小时获得多个元素的动态宽度

3 个答案: