[jquery]이미지 회전, rotate();

 

 

[jquery]이미지 회전, rotate();

 

INTRO

 

web image viewer의 첫번 째 기능 : 이미지의 회전

 

이미지 뷰어의 기능 중 이미지회전을 웹으로 구현하는 방법입니다.

 

 

 

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="rotateL" >왼쪽으로 회전</button>   <img id="bigImg" src="" >   <button id="rotateR" >오른쪽으로 회전</button>   </div>       <script type="text/javascript">   $(function(){   var angle = 0;        // 현재의 각도를 변수로 저장   $('#rotateL').click(function() { angle += -90; $("#bigImg").rotate(angle);});   $('#rotateR').click(function() { angle += +90; $("#bigImg").rotate(angle);});   });   </script> Colored by Color Scripter

cs

회전의 각도를 줄이거나 늘리려면  angle+= **; 이부분의 숫자를 변경하면 됩니다.

 

 

 

 

OUTRO

더 간단한 방법이 있다면 댓글로 알려주세요!!