[실습] JQuery - animation, random으로 사진 변경/확대/축소

HTML

  <button id="change">변경하기</button>
    <button id="dd">확대/축소</button>
    <div><img src="./img/1.jpg" alt="" id="imgbox" /></div>

 

CSS

* {box-sizing: border-box;}
div {width: 30%;border: 1px solid black;display: none;}
#imgbox {background-repeat: no-repeat;width: 100%;}

 

JS

 $(document).ready(function () {
        $("#change").on("click", function () {
          var ran = Math.floor(Math.random() * 10 + 1);
          $("#imgbox").attr("src", "./img/" + ran + ".jpg"); //attr : 속성바꾸는 메서드
        });
        $("#dd").on("click", function () {
          $("div").toggle("slow");
        });
      });

 

---

img태그를 감싸고 있는 div의 display 속성에 none을 주어 화면에 표시되지 않게 지정

$("요소").attr(속성, 변경할 값) : 속성을 바꾸는 함수

랜덤함수를 사용하여 랜덤값을 지정하고 변경 버튼을 클릭할 때마다 사진이 변경되도록 하였음

​

$("요소").toggle("숫자 or 속도속성") : 해당 요소를 보이거나 보이지 않게 만드는 함수

숫자로 속도를 조절하거나, slow/fast 등을 사용하여 속도를 변경한다.

​

결과 영상 확인 : https://blog.naver.com/jun950617/222832306943

[실습] JQuery - animation, random으로 사진 변경/확대/축소