javascript - 如何在 UL 标签内的 .each() 函数中循环

Question

我正在尝试使它动态化。所以我有 9 张图片，我想将宽度 (px) 增加 10px，当到达第五张图片时，它应该减少到原始大小 10px。到目前为止，我一直在增加。

$( ".org-collections li img" ).each(function( index ) {
  var index = index+"9";
  var calc = 150+parseInt(index);

  if(calc == 199){

  } 
  $(this).css("max-width",calc+"px");
});

这是 demo .

例子:

Answer 1

这基本上就是您要进行的计算。我一直在 JSFiddle 中玩游戏以获得所涉及常量的“最佳外观”值，请随意更改它们以适应:

(请注意，最大值，我在这里设置为 150，如果您将其设置得更高，则效果不会太好 - 我认为这与图像的固有尺寸有关，但似乎并没有想要变得比特定值更高。)

$( ".org-collections li img" ).each(function( index ) {
  var calc = 150 - 9*Math.abs(4 - index);
  $(this).css("max-width",calc+"px");
});

此外，4 的值之所以有效，是因为它是中间值，假设您恰好有 9 张图像(就像您在此处所做的那样)。如果您可能有一个可变数字 n，那么只要它是奇数，您就可以用 (n - 1)/2

替换 4