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で1つのディメンションのみを指定し、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の値は更新されませんコードが終了するまでこれが起こっています。

このコードで

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; 

：コードは、このコードではalert

の場合で動作する理由ワーキングのthats警告ボックスが離れて現在のウィンドウからフォーカスを取り、我々が閉じたときには、再び現在のウィンドウに切り替えimg1.heightおよびimg1.widthは、変数値changeに依存します。関数の実行時に変数の値が更新されるため、画像の高さと幅が変更されます。私たちは、このコードで警告した場合も、それは画像の前の高さを示して

​​3210

：

今ポイントが参照するには、ということです。

そこで私は、関数の終了後の画像の変化の高さと幅と結論し、それが