비전공개미 개발노트
[JavaScript / jQuery] 클릭할때마다 무한회전 본문
반응형
SMALL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
</head>
<body>
<!-- <img id="chic" src="../images/aaa.gif" alt="치킨"> -->
<div id="chic" style="width:200px;height:200px;border:2px solid #aaa;background-color:yellow;text-align:center;line-height:200px;">나 돌아간다~</div>
<script>
//deg 90도로 회전시작
var deg = 90;
//처음 90값을 넣는다
function rot(a){
//css transform: rotate(90deg); 실행
$("#chic").css("transform", "rotate("+a+"deg)");
//deg값에 +90을 추가
deg = deg + 90;
//deg값이 360을 넘어가면 deg값은 다시 90으로 초기화(안해도 잘 돌아감)
//if(deg > 360){
// deg = 90;
//}
}
//id chic를 클릭하면 rot함수가 실행된다
$("#chic").click(function(){
rot(deg);
});
</script>
</body>
</html>나 돌아간다~
반응형
LIST
'프론트엔드 > JavaScript' 카테고리의 다른 글
| [JavaScript] 배열출력, $.each문, forEach문 (0) | 2022.10.06 |
|---|---|
| [JavaScript/jQuery] rgb색상을 랜덤하게 받아서 박스만들기 (0) | 2022.10.06 |
| [JavaScript] 배열을 불러와 박스색상 변경하기 (0) | 2022.10.06 |
| [JavaScript] Date, String, Math, 사용자 객체 (0) | 2022.10.05 |
| [JavaScript] 배열선언, 배열출력, $.each (1) | 2022.10.05 |
Comments