반응형
[jquery]이미지 확대/축소
INTRO
web image viewer의 두번 째 기능 : 이미지의 확대 / 축소
이미지 뷰어의 기능 중 이미지 확대/축소기능을 웹으로 구현하는 방법입니다.
- 버튼 클릭 시 확대 / 축소
- selectBox에 확대 / 축소 구간을 정하고(이 글에서는 50%~300%) 클릭 시 스케일 조정
CONTENTS
|
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
|
<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>
|
cs |
Script.
|
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<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>
|
cs |
OUTRO
더 쉬운 방법이 있으면 댓글달아주세요!!
반응형
'Programming > JavaScript' 카테고리의 다른 글
| [jquery]영역프린트하기, window.print(); (0) | 2022.09.05 |
|---|---|
| [jquery]이미지 회전, rotate(); (0) | 2022.09.05 |
| [JQuery]div영역 이미지로 저장하기 (0) | 2022.09.05 |
| [jquery]영역프린트하기,IEPageSetupX (0) | 2022.09.05 |