<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>키보드 좌우 화살표 키 사용하기</title>
<link rel="stylesheet" href="style_js.css">
</head>
<body>
<h4>좌우 화살표 키를 눌러 보세요</h4><hr>
<img id="largerImage" src="../media/photo7.jpg">
<script>
const image = document.getElementById("largerImage");
let wb = 0;
document.addEventListener("keydown", (event) => {
if(event.key == "ArrowLeft")
moveImage(-10);
else if(event.key == "ArrowRight")
moveImage(10);
});
function moveImage(m) {
wb = wb + m;
if ( wb < 0 ) wb = 0;
else if ( wb > 450 ) wb = 450;
image.style.transform = `translateX(${wb}px)`;
}
</script>
</body>
</html>
]]>