JavaScript - 尝试使用鼠标滚轮调整图像大小

Question

我是 JavaScript 的初学者，我想通过滚动鼠标滚轮来调整图像大小。我在 Chrome 中运行它。

此代码仅调整其高度而不调整其宽度；我尝试通过将数字代入 img1.height 和 img1.width 来在纸上解决这个问题，它可以工作，但在我运行代码时却不行。

HTML

<img id="img1" src="https://upload.wikimedia.org/wikipedia/commons/7/73/HDRI_Sample_Scene_Balls_(Auto_Exposure).jpg" style="position:absolute; transition: 1s all">

JAVASCRIPT --- 错误的代码，不起作用，只有高度变化

function changeSize(e) {
    var img1 = document.getElementById("img1");
    var slope = img1.height / img1.width;

    img1.height = img1.height + e.deltaY;
    img1.width = img1.height / slope;
}

function init() {
    window.onwheel = changeSize;
}

window.onload = init;

使用相同的 HTML 代码，下面的代码有效，但我不明白为什么将新高度复制到变量并使用该变量而不是图像高度有效。

JAVASCRIPT --- 正确的代码，有效，高度和宽度都发生了变化

function changeSize(e) {
    var img1 = document.getElementById("img1");
    var slope = img1.height / img1.width;
    var change = img1.height + e.deltaY;

    img1.height = change;
    img1.width = change / slope;
}

function init() {
  window.onwheel = changeSize;
}

window.onload = init;

感谢您的回答。

Answer 1

img1.height = img1.height + e.deltaY;
img1.width = img1.height / slope;

在上面的代码中，尝试为图像高度分配一个值并立即读取它。问题是图像属性是异步设置的。为了读取先前分配的高度值，您应该等待 onload 事件，如下所示:

img1.height = img1.height + e.deltaY;
img1.onload = function() {
    img1.width = img1.height / slope;
}