이미지 확대/축소

<div>
 
  <button id="scale_up" >이미지 확대</button>
 
  <select id="selectBox">
 
    <option value="50" onclick="scaleOpt('50');" >50%</option>
 
    <option value="100" onclick="scaleOpt('50');" >100%</option>
 
    <option value="150" onclick="scaleOpt('50');" >150%</option>
 
                              ...
 
                              ...
 
                              ...
 
  </select>
 
  <button id="rotateR" >이미지 축소</button>
 
  <img id="bigImg" src="" style="width: 644px; height: 912px;">
 
</div>

 

 

<script type="text/javascript">
 
// selectBox로 스케일 조정
 
// 이미지의 크기가 너무 클 경우 팝업창에 한번에 보이지 않을 수 있으니 처음 가져온 이미지의 크기를 저장합니다.
 
var width = 644;                
 
var height = 912;
 
function scaleOpt(scale){
 
    $("#bigImg").css("width", width*scale);
 
    $("#bigImg").css("height", height*scale);
 
}
 
 
 
//이미지 확대
 
var selectBoxVal;
 
$('#scale_up').click(function() {
 
        selectBoxVal = parseInt($("#selectBox").val());
 
        if(selectBoxVal < 300){
 
            $("#selectBox").val(selectBoxVal+10).prop("selected", true);
 
            $("#bigImg").css("width", width*($("#selectBox").val()/100));
 
            $("#bigImg").css("height", height*($("#selectBox").val()/100));
 
        }
 
        else if(selectBoxVal == 300){
 
            alert("최대 확대 배율입니다.");
 
        }
 
});
 
// 이미지 축소
 
$('#scale_down').click(function() { 
 
        selectBoxVal = parseInt($("#selectBox").val());
 
        if(selectBoxVal > 50){
 
            $("#selectBox").val(selectBoxVal-10).prop("selected", true);
 
            $("#bigImg").css("width", width*($("#selectBox").val()/100));
 
            $("#bigImg").css("height", height*($("#selectBox").val()/100));
 
        }
 
        else if(selectBoxVal == 50){
 
            alert("최대 축소 배율입니다.");
 
        }
 
});
 
</script>