コードの通りです。
内容はこれだけ。
- マウスホイールイベントをリスナー登録する
- 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>