2

我正在尝试在 DIV 中创建一个包含 5 个图像的面板，其中 jQueryanimate()连续扩展每个图像，直到所有 5 个图像占用其容器宽度的 100%而不换行

这是问题的链接：

初始 blockUI 显示正常，但一旦过期并显示正常页面，相同的五个图像将在某些分辨率下完美显示（我在 FF 或 IE 中使用 ctrl-+/- 进行测试），而其他图像则导致最后一个图像包裹。

动画调整大小的代码如下，其目的是将每个图像的大小调整到容器宽度的 20%。我试图看看它是否与四舍五入有关，结果是空的。我已经研究了尝试以下部分/全部的 CSS 选项：

overflow:hidden;
white-space: nowrap;
display:inline-block;


$(".service_img").each(function (i) 
  {
    // if the image in question's width is > 20% of its container then re-adjust it to be 20% so it will fit
    if($('#'+this.id).outerWidth() > Math.floor((($('#services_imgs_container').outerWidth()/5)))){
      $('#'+this.id).width(Math.floor(($('#services_imgs_container').outerWidth()/5)));
    }
    else {
      $('#'+this.id).animate({width:(Math.floor(($('#services_imgs_container').outerWidth()/5)))},{duration:500, queue:false});
      //$('#'+this.id).animate({width:'19.2%'},{duration:500, queue:false});
      $('#'+this.id).show();
    }

  })
4

1 回答 1

0

你可以在resize之后写一个函数，看看#services_imgs_container是否是div.service_img:eq(0)高度的两倍。如果是每次将每个 .service_img 的大小减小一个像素，直到该语句不再正确。

像这样的东西

while($('#services_imgs_container').height() >= ($('.service_img:eq(0)').height() * 1.5))
{
    $('.service_img').css('width': '-=1');
}
于 2012-10-04T23:47:04.913 回答