<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wheel 이벤트 사용하기</title>
<link rel="stylesheet" href="style_js.css">
<style>
body {
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<h4>마우스의 휠을 돌려보세요</h4><hr>
<img id="largerImage" src="../media/photo5.jpg" width="320" height="210">
<script>
const image = document.getElementById("largerImage");
let wb = 320, hb = 210;
document.addEventListener('wheel', (event) => {
event.preventDefault(); // 기본 스크롤 이벤트 제거
if (event.deltaY < 0) {
wb = wb * 1.1;
hb = hb * 1.1;
} else {
wb = wb / 1.1;
hb = hb / 1.1;
}
image.style.width = wb + 'px';
image.style.height = hb + 'px';
});
</script>
</body>
</html>
]]>