[JAVASCRIPT#07]자바스크립트 이미지 확대 축소 및 응용
확대버튼 | 축소버튼 ->확대버튼을 누르면 이미지가 조금씩(30px씩) 확대
---------------------- ->축소버튼을 누르면 이미지가 조금씩(30px씩) 축소
이미지(최초크기 200x200) ->단, 최소크기는 90x90 최대크기는 450px을 넘을 수 없습니다.
이러한 문제가 있다고하면,
스타일시트를 사용하기위해 우선 <link rel="stylesheet" type="text/css" href="./css/common.css">를 넣어주고
<script>
//확대함수
function increase(){
//console.log("increase");
var img = document.querySelector("#custom-image");
console.log(img);
img.width += 30;
img.height += 30;
//확대최대는 450이상이면 안된다.
if(img.width>450){
img.width=450;
}
if(img.height>450){
img.height=450;
}
}
//축소함수
function decrease(){
//console.log("decrease");
var img = document.querySelector("#custom-image");
console.log(img);
img.width -= 30;
img.height -= 30;
//줄어드는건 90미만이면 안된다.
if(img.width<90){
img.width=90;
}
if(img.height<90){
img.height=90;
}
}
</script>
</head>
<body>
<input type="button" value="확대" onclick="increase();">
<input type="button" value="축소" onclick="decrease();">
<hr>
<img alt="실습용 이미지" src="https://placeimg.com/200/200/any" id="custom-image"
width="200" height="200"> -->px안써도적용됌
</body>
위와 같은 식인데, 여기서 typeof라는 명령으로 데이터의 유형을 파악할 수 있다.
console.log(typeof img.width); -> img.width 값은 number 형태로 자바스크립트에서 관리된다.
자바스크립트에서는 number, boolean, string, object, function 등으로 데이터 유형을 구분한다.
여기서 만약 바를 통해 크기를 확대하고 축소해보고 싶다면,
범위 선택 도구를 최소값 90, 최대값 450, 증가치 30, 기본값 200으로 설정하고
클릭이벤트는 부적절하고 값이 변화하는 경우를 감지하여 처리(change)
onchange : 값이 변화하는 시점엡 발생하는 이벤트 -> 드래그하는 동안 이미지 확대/축소가 안됨.
oninput : 값이 입력되는 시점에 발생하는 이벤트 -> 드래그하는 동안 이미지 확대/축소가 된다.
<script>
function changeSize(){
var range = document.querySelector("input[type=range]");
var img = document.querySelector("#custom-image");
img.width = range.value;
img.height =range.value;
}
</script>
</head>
<body>
<input type="range" min="90" max="450" step="30" value="200" oninput="changeSize();">
<hr>
<img alt="실습용 이미지" src="https://placeimg.com/200/200/ang" id="custom-image"
width="200" height="200"> -->px안써도적용됌
</body>