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; 
} 

Answer 2

在標記/ css中只指定一個維度，並通過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; 
 
}

<img id="image" src="//placehold.it/240x120/33d/fff">

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像這樣：

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;

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

現在我們看到代碼開始按預期工作。但要注意的是，警報的值是之前的圖像高度，而不是更新的圖像高度，即使它是在img1.height = img1.height + e.deltaY;之後寫入的。由於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取決於變量值change。由於函數運行期間變量更新的值會更改圖像的高度和寬度。

我們看到的一點是：

​​3210

如果我們在此提醒代碼也它顯示的圖像的先前的高度。

因此，我的結論是，在第一個代碼的高度和寬度的函數結束後的圖像變化，並且由於寬度取決於更新的高度，因此不會改變