我想逐步增加 .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>
答案 0 :(得分: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>