[자바스크립트] 화면 확대 축소 하기 (이미지 확대/축소)

아래 소스코드는 확대/축소 버튼을 통해서 이미지가 확대 비율에 따라 동적으로 변경되므로, 사용자가 버튼을 클릭할 때마다 이미지의 크기가 조절됩니다.
 
 

소스코드

ㅇvar nowZoom = 100;

-nowZoom 변수를 선언하고 초기 값으로 100을 설정합니다. 현재 이미지의 확대 비율을 나타냅니다

ㅇfunction zoomIn() {...}; (이미지를 확대하는 함수)

-nowZoom 변수를 40씩 증가시킵니다.

-특정 제한을 초과하지 않도록 설정하고, 실제로 화면에 적용하기 위해 zooms 함수를 호출합니다.

ㅇfunction zoomOut() {...}; (이미지를 축소하는 함수)

-nowZoom 변수를 40씩 감소시킵니다.

-특정 제한을 유지하고, 실제로 화면에 적용하기 위해 zooms 함수를 호출합니다.

ㅇfunction zoomReset() {...}; (이미지를 원래 크기로 되돌리는 함수)

-nowZoom 변수를 100으로 설정하고, 실제로 화면에 적용하기 위해 zooms 함수를 호출합니다.

ㅇfunction zooms() {...}; (이미지의 확대/축소를 실제로 처리하는 함수)

-nowZoom이 특정 제한을 초과하면 경고 메시지를 표시합니다.

-image-popup-content 요소에 대해 zoom 스타일을 설정하여 이미지를 확대/축소합니다.
 
 

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<style>
image-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.image-popup-content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.image-popup-content img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  max-width: 1500px;
}

.close-button {
  color: #fff;
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 100px;
  cursor: pointer;
  max-width: 120px;
  max-height: 120px;
}

.zoom-button1 {
  color: #fff;
  position: absolute;
  top: 100px;
  right: 10px;
  font-size: 100px;
  cursor: pointer;
  max-width: 120px;
  max-height: 120px;
}

.zoom-button2 {
  color: #fff;
  position: absolute;
  top: 200px;
  right: 26px;
  font-size: 100px;
  cursor: pointer;
  max-width: 120px;
  max-height: 120px;
}
</style>
<script>
var nowZoom = 100; // 현재 비율

$(function() {
	$("#modal").modal("show");
	
	$(".close-button").click(function(){
		$("#modal").modal("hide");
	});
	
	$(".zoom-button1").click(function(){
		zoomIn();
	});
	
	$(".zoom-button2").click(function(){
		zoomOut();
	});

	$("#modal").on('hidden.bs.modal', function (e) {
		zoomReset(); 
	});
	// 화면크기 확대
	function zoomIn() {
		nowZoom = nowZoom + 40;
		
		if(nowZoom >= 100){
			$(".image-popup-content").css("height", nowZoom+'%');
			$(".image-popup-content").css("weight", nowZoom+'%');
			$(".image-popup").css("overflow", "auto");
		}
		
		// 화면크기 최대 확대율 200%
		if(nowZoom >= 200){
			nowZoom = 200;
			$(".image-popup-content").css("height", nowZoom+'%');
			$(".image-popup-content").css("weight", nowZoom+'%');
			$(".image-popup").css("overflow", "auto");
		}
		zooms();
	}
	// 화면크기 축소
	function zoomOut() {
		nowZoom = nowZoom - 40;
		
		if(nowZoom <= 100){
			nowZoom = 100;
			$(".image-popup-content").css("height", nowZoom+'%');
			$(".image-popup-content").css("weight", nowZoom+'%');
			$(".image-popup").css("overflow", "none");
		}else{
			$(".image-popup-content").css("height", nowZoom+'%');
			$(".image-popup-content").css("weight", nowZoom+'%');
			$(".image-popup").css("overflow", "auto");
		}
		zooms();
	}
	// 원래 화면크기도 되돌아가기
	function zoomReset() {
		nowZoom = 100;
		$(".image-popup-content").css("height", nowZoom+'%');
		$(".image-popup-content").css("weight", nowZoom+'%');
		$(".image-popup").css("overflow", "none");
		zooms();
	}
	
	function zooms() {
		if(nowZoom >= 200){
			return false;
		}
		document.getElementById("image-popup-content").style.zoom = nowZoom + "%";
		if(nowZoom == 100) {
			alert("더 이상 축소할 수 없습니다."); 
			return;
		}
		if(nowZoom == 200) {
			alert("더 이상 확대할 수 없습니다.");
			return;
		}
	}
});
</script>
<div id="modal" class="modal" style="overflow:hidden;">
    <div class="image-popup-content" id="image-popup-content">
        <img src="img5.jpg">
    </div>
    <span class="close-button">&times;</span>
    <span class="zoom-button1">+</span>
    <span class="zoom-button2">-</span>
</div>

 
 

---

 

소스코드 결과