Question

我想逐步增加 .img 元素的大小，其中有三种大小（原始、大和最大）。当前代码应该获取 .img 的大小，然后递增该值直到达到最大值，然后重新回到原始高度。

如何更改代码以增加三倍（原始、大和最大）？

$(document).ready(function () {
  function incSize(currentSize, incr, min, max) {
    fSize = ((parseFloat(currentSize) + incr) % max) + min;
    return fSize + "px";
  }
  var $this = $(this);
  $("button").click(function () {
    newFontSize = incSize($(".img").css("height"), 24, 46, 94);
    $(".img").css({
      height: newFontSize,
      width: newFontSize
    });
  });
});

.img {
  height: 46px;
  width: 46px;
  border: 3px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Resize Image</button>
<div class="item">
  <div class="img">
  </div>
</div>
<div class="item">
  <div class="img">
  </div>
</div>
<div class="item">
  <div class="img">
  </div>
</div>

Answer 1

也许有一种更优雅的方法，但这适用于 Math.max 和 Math.min，并预先存储原始大小。

$(document).ready(function () {
  function incSize(currentSize, incr, min, max) {
    if (parseFloat(currentSize) === max) return originalWidth;
    fSize =  Math.max(Math.min(parseFloat(currentSize) + incr, max), min);
    return fSize + "px";
  }
  var $this = $(this);
  var originalWidth = $(".img").css("width");
  $("button").click(function () {
    newFontSize = incSize($(".img").css("height"), 24, 46, 94);
    $(".img").css({
      height: newFontSize,
      width: newFontSize
    });
  });
});

.img {
  height: 46px;
  width: 46px;
  border: 3px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Resize Image</button>
<div class="item">
  <div class="img">
  </div>
</div>
<div class="item">
  <div class="img">
  </div>
</div>
<div class="item">
  <div class="img">
  </div>
</div>

jQuery - 单击按钮时增加调整 div 的大小

1 个答案: