[HTML][JavaScript][初心者] Ctrl + マウスホイールで画像拡大

 コードの通りです。

 内容はこれだけ。

  • マウスホイールイベントをリスナー登録する
  • Ctrlキーが押されているかチェック
  • 本来のCtrl + マウスホイール時のイベントを止める
  • マウスホイール値を取得
  • 正なら画像サイズ上げて、逆なら下げる
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <img id="image" width="500" src="test.jpg">
    </body>
    <script>
    window.addEventListener('wheel', function(event) {
        if (!event.ctrlKey) {  // Ctrlキーか判定
            return;
        }
        event.preventDefault();  // 元のCtrl + マウスホイール時のイベントを止める
        let wheelVal = event.deltaY;
        var img = document.getElementById("image");
        // マウスホイール値が正なら画像の大きさを+10ピクセルにする
        if (wheelVal < 0) {
            img.width -= 10;
        } else {
            img.width += 10;
        }
    }, {passive: false});

    </script>
</html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です