WP/practice9-6.html at main · yj-044/WP · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습문제 9-6</title>
    <script>
        var size=100;
        function wheel(e) {
            if(e.wheelDelta <0){
                size=size-(size*0.05);
                if(size<0){
                    size=0;
                }
            }
            else{
                size = size + (size*0.05)
            }
document.getElementById("img").style.width=size+"px";
document.getElementById("img").style.height=size+"px";
        }
    </script>
</head>
<body>
    <h3>마우스 휠을 이용한 이미지 확대/축소</h3>
    <hr>
    <p>이미지 위에 휠을 위로 굴리면 이미지가 축소되고
        아래로 굴리면 이미지과 확대됩니다.</p>
        <img id="img" src="images/flower.jpg" alt="" onwheel="wheel(event)" width="100px" height="100px">
</body>
</html>