고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
jQuery UI 에서 제공하는 resizable 함수를 이용하면
아래와 같이 쉽게 이미지 크기변경 코드를 작성할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
</head>
<body>
<div id="resizable" class="ui-widget-content" style="width:200px;height:160px; border: 0px solid #c5c5c5;">
<img src="http://img.imnews.imbc.com/news/2016/culture/article/__icsFiles/afieldfile/2016/09/08/4_5.jpg" style="width:100%;height:100%">
</div>
<script language = "javascript">
$( "#resizable" ).resizable();
</script>
</body>
</html>
이미지를 둘러싸는 DIV 를 만든후에 그 안에 image 를 100% 로 설정한 후 넣어주면 됩니다.
DIV 주변(이미지주변)에 마우스가 위치하면 커서가 크기변경용 커서로 변경이 되며,
클릭 후 드래그 하면, 이미지 크기를 변경할 수 있다.
반응형
'IT공부방 > jQuery, ajax, java' 카테고리의 다른 글
| jQuery prepend() 함수... 특정 엘리먼트 앞에 Insert (0) | 2016.09.14 |
|---|---|
| jQuery 오디오/비디오 솔루션 jPlayer 샘플코드 (0) | 2016.09.12 |
| jQuery Image Resize 이미지크기 실제로 변경하기 (0) | 2016.09.08 |
| javascript replace / replaceAll 문자열내 전체에서 대상문자변환, 문자열치환 (2) | 2016.09.08 |
| jQuery 파일압축 JSZip (Zip File Plugin) 활용하기 (5) | 2016.08.31 |
댓글 영역