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

onload

在上面的代码中，尝试为图像高度分配值并立即读取。问题是图像属性是异步设置的。为了读取先前分配的高度值，您应该等待img1.height = img1.height + e.deltaY; img1.onload = function() { img1.width = img1.height / slope; }事件，如下所示：

{{1}}

Answer 2

仅在markup / css中指定一个维度，并通过alert($(window).width());事件进行更改。图像将调整大小，保持纵横比不变。

在下面的代码中尝试：

wheel

var image = document.getElementById('image');
image.addEventListener('wheel', function(e) {
  this.width += Math.floor(e.deltaY);
  e.preventDefault();
});

img { 
  position: absolute; top: 50%; left: 50%; 
  transform: translate(-50%, -50%);
  transition: all 0.2s linear;
}

Answer 3

在此代码中不工作：

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;

如果我们这样添加alert：

＆＃13;

function changeSize(e) {
    var img1 = document.getElementById("img1");
    var slope = img1.height / img1.width;
    img1.height = img1.height + e.deltaY;
    alert(img1.height);
    img1.width = img1.height / slope;
}

function init() {
    window.onwheel = changeSize;
}

window.onload = init;

＆＃13;

<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">

＆＃13;

现在我们看到代码开始按预期工作了。但需要注意的是，alert的值是先前的图像高度，而不是更新的高度，即使它是在img1.height = img1.height + e.deltaY;之后写的。自{{ 1}}值不会更新，直到代码结束这种情况发生。警报框将焦点从当前窗口移开，当我们再次关闭它时切换到当前窗口，这就是为什么代码在img1.height的情况下工作的原因

在此代码工作：

中

alert

在此代码中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;以及img1.height依赖于变量值img1.width。由于变量的值在函数运行时期间更新，因此它会更改图像的高度和宽度

现在要看的是：

＆＃13;

change

＆＃13;

function changeSize(e) {
    var img1 = document.getElementById("img1");
    var slope = img1.height / img1.width;
    var change = img1.height + e.deltaY;
    img1.height = change;
    alert(img1.height);
    img1.width = change / slope;
}
function init() {
  window.onwheel = changeSize;
}

window.onload = init;

＆＃13;

如果我们在此代码中发出警报，它也会显示图像的上一个高度。

因此，我得出结论，在函数结束后图像的高度和宽度会发生变化，因为在第一个代码中，宽度取决于更新高度，因此不会发生变化

JavaScript - 尝试使用鼠标滚轮

3 个答案: