Menu

TOP Notice Topic Cord self-introduction Guide Lines

Manage

Login
Cord > Study_Web 전체 다운로드
파일 목록
Study_Web > 이후/practice 9-6.html Lines 34 | 1.0 KB
다운로드 

                        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Onwheel</title>
    <script>
        function controlImageSize(e, img) {
            if (e.wheelDelta > 0) {  // 휠을 위로 굴린 경우 5%씩 축소
                img.width -= img.width * 0.05;
                img.height -= img.height * 0.05;
            }
            else {  // 휠을 아래로 굴린 경우 5%씩 증가
                img.width += img.width * 0.05;
                img.height += img.height * 0.05;
            }
        }
    </script>

</head>

<body>
    <h3>마우스 휠을 이요한 이미지 확돼와 축소</h3>
    <hr>
    <p>이미지 위에 휠을 위로 굴리면 이미지 축소
        아래로 굴리면 확대됩니당
    </p>
    <img src="media/apple.jpg" width="280" height="210" onwheel="controlImageSize(event,this)">

</body>

</html>