메뉴 건너뛰기

2020.11.25 13:32

이미지 회전, rotate();

조회 수 1450 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
<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>

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


  1. No Image 22Dec
    by
    2016/12/22 Views 8361 

    흐르는 배너 만들기2

  2. No Image 21Sep
    by
    2016/09/21 Views 7141 

    화면 이동시에 레이어가 따라다니게 하기

  3. No Image 31Mar
    by
    2021/03/31 Views 210 

    행에 징검다리 스타일 입히기 (:odd, :even)

  4. No Image 26Mar
    by
    2021/03/26 Views 283 

    항상 최신버전으로 사용하기

  5. No Image 22Dec
    by
    2016/12/22 Views 6908 

    항상 레이어가 정 가운데 위치하는 스크립트

  6. No Image 22Dec
    by
    2016/12/22 Views 7732 

    하단 고정 레이어 스타일(CSS) 따라하기

  7. No Image 06Sep
    by
    2018/09/06 Views 2620 

    페이지 이동 제어 - href, replace, pushState()

  8. No Image 06Mar
    by
    2017/03/06 Views 9028 

    파일 업로드 방법, 이미지 파일 업로드 예제 소스

  9. No Image 28Sep
    by
    2018/09/28 Views 3610 

    특정영역 제외하고 body 클릭

  10. No Image 04Jun
    by
    2019/06/04 Views 867 

    텍스트 필드에 기본글이 마우스 클릭하면 지워지게 하기 폼필드 소스 내에 아래 태그를 삽입한다.

  11. No Image 07Nov
    by
    2018/11/07 Views 1278 

    터치 디바이스 분기처리

  12. No Image 21Sep
    by
    2016/09/21 Views 7530 

    키보드 이벤트가 발생한 객체의 id값 알아내기

  13. No Image 25Mar
    by
    2021/03/25 Views 322 

    최초 접속시 css와 script가 로딩되지 않을때

  14. No Image 04Jun
    by
    2019/06/04 Views 780 

    체크박스 전체선택/해지

  15. No Image 21Sep
    by
    2016/09/21 Views 6667 

    체크박스 또는 라디오 버튼의 체크여부 변경하기

  16. No Image 07Nov
    by
    2018/11/07 Views 2017 

    중복 없는 랜덤

  17. No Image 31Mar
    by
    2021/03/31 Views 233 

    제이쿼리에서 클래스(class) 이름 추가/삭제

  18. No Image 26Mar
    by
    2021/03/26 Views 842 

    정규식, 한글 못쓰게 하기, replace all

  19. 입력폼에 입력되는 값의 유효성 체크하기 두번째

  20. No Image 25Nov
    by 조쉬
    2020/11/25 Views 1450 

    이미지 회전, rotate();

Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved