230321 - classList μ‘μš©(modal popup), jQuery(animate)

raumschiff_Β·2023λ…„ 3μ›” 22일
JavaScriptjquery
1

ꡭ비지원 ν”„λ‘ νŠΈμ—”λ“œ κ³Όμ •

λͺ©λ‘ 보기
35/81

🚩 classList μ‘μš©

이전, λ‹€μŒ λ²„νŠΌμ΄ μžˆλŠ” modal νŒμ—…μ°½ λ§Œλ“€κΈ°


βœ’οΈ μ½”λ“œμž‘μ„±

μž…λ ₯

css

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: cornsilk; }
li { list-style: none; }
.wrap {
  max-width: 1080px;
  min-width: 700px;
  margin: 100px auto;
}
.list {}
.list li {
  float: left;
  width: 25%;
  height: 200px;
  padding: 6px;
}
.list li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pop {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  display: none;
  justify-content: center;
  align-items: center;
}
.pop section {
  position: relative;
  padding: 50px;
  background: #fff;
}
.pop section .pop_img {
  max-height: 70vh;
}
.pop section .closeBtn {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: steelblue;
  color: #fff;
  text-decoration: none;
  font-size: 30px;
  text-align: center;
  line-height: 40px;
}
.pop p {
  text-align: center;
  margin-top: 20px;
}
.pop p button {
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}
.pop.active { display: flex; }

html

<div class="wrap">
  <h2>Modal PopUp</h2>
  <ul class="list">
    <li><img src="../img/pic1.jpg" alt=""></li>
    <li><img src="../img/pic2.jpg" alt=""></li>
    <li><img src="../img/pic3.jpg" alt=""></li>
    <li><img src="../img/pic4.jpg" alt=""></li>
    <li><img src="../img/pic5.jpg" alt=""></li>
    <li><img src="../img/pic6.jpg" alt=""></li>
    <li><img src="../img/pic7.jpg" alt=""></li>
    <li><img src="../img/pic8.jpg" alt=""></li>
    <li><img src="../img/pic9.jpg" alt=""></li>
  </ul>
</div>

<div class="pop">
  <section>
    <img src="../img/pic1.jpg" alt="" class="pop_img">
    <a href="#" class="closeBtn">x</a>
    <p>
      <button class="prev">&lt; 이전</button>
      <button class="next">λ‹€μŒ&gt;</button>
    </p>
  </section>
</div>

js

const elList = document.querySelectorAll(".list li img"); // 썸넀일 이미지
const elPop = document.querySelector(".pop") // νŒμ—…μ°½
const elClose = document.querySelector(".closeBtn") // λ‹«κΈ° λ²„νŠΌ(νŒμ—… μ•ˆ)
const elPopImg = document.querySelector(".pop_img") // 큰 이미지(νŒμ—… μ•ˆ)
const elBtns = document.querySelector(".pop p") // λ²„νŠΌλ“€μ˜ λΆ€λͺ¨ p(νŒμ—…)
let elTotalImg = elList.length;

let num = 0; // 이미지 μˆœμ„œλ₯Ό λ‚˜νƒ€λ‚Ό λ³€μˆ˜

// 썸넀일 이미지λ₯Ό λˆ„λ₯΄λ©΄ νŒμ—…μ°½ λ°œμƒ
elList.forEach(function(item, index){ // index : parameter둜 λͺ‡ 번째 μ„ νƒν–ˆλŠ”μ§€ μ•Œμ•„μ˜¬ 수 있음
  item.onclick = function(){
    elPop.classList.add("active");
    elPopImg.src = item.src;
    num = index; // λͺ‡ 번째 μ•„μ΄ν…œμ„ λˆŒλ €λŠ”μ§€ μ•Œμ•„μ™€μ„œ μ „μ—­λ³€μˆ˜ num에 λŒ€μž…
  }
});

// νŒμ—…μ°½ λ‹«κΈ°
elClose.onclick = function(e){
  e.preventDefault();
  elPop.classList.remove("active");
};

// 이전, λ‹€μŒ λ²„νŠΌ
elBtns.onclick = function(e){
  if(e.target.classList.contains("prev")) { // eκ°€ λ³΄λ‚΄μ£ΌλŠ” 정보 쀑 classList만
    if (num == 0) { // λ¬΄ν•œλ£¨ν”„
      num = elTotalImg;
    }
    num = num - 1;
  } else {
    // if (elTotalImg - 1) {
    //   num = -1;
    // }
    // num++;
    if (num != (elTotalImg - 1)) { // num이 8이 μ•„λ‹λ•Œλ§Œ 1μΆ”κ°€
      num++;
    } else {
      num = 0;
    }
  }
  console.log("ν˜„μž¬ num : ", num);
  elPopImg.src = elList[num].src;
};

좜λ ₯

  • μ΄λ―Έμ§€λ‘œ λŒ€μ²΄







🚩 jQuery

animate()

πŸ“ μ„€λͺ…

  • μ œμ΄μΏΌλ¦¬μ—μ„œ μ• λ‹ˆλ©”μ΄μ…˜ 효과λ₯Ό μ‚¬μš©ν•  수 μžˆλ„λ‘ ν•΄μ£ΌλŠ” λ©”μ†Œλ“œ


βœ’οΈ μ‚¬μš©λ²•

μž…λ ₯

예제1

css

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background: #d3d3d3;
}
h1 { font-weight: normal; }

.banner { background: #fff; }
.banner div {
  position: relative;
  max-width: 1000px;
  margin: auto;
  height: 80px;
}
.banner span {
  font-size: 3em; /* 16px * 3 */
  line-height: 80px;
  font-weight: bold;
}
.banner img { 
  height: 60px;
}
.banner a {
  position: absolute;
  top: 30px;
  right: 0;
}

main { 
  display: table; /* λΆ€λͺ¨ μš”μ†Œ */
  width: 100%;
  background: #818181; 
}
main > div { 
  display: table-cell; /* μžμ‹ μš”μ†Œ */
  height: 600px; 
}
main > div > h1 {
  font-size: 1px;
  opacity: 0;
  color: #fff;
  text-align: center;
}


footer { padding: 30px 0; } 
footer div {
  max-width: 1000px;
  margin: auto;
  text-align: right;
}
footer small {
  color: #fff;
  font-size: 0.8em;
}

html

<div class="banner">
  <div>
    <img src="./img/logo.png" alt="">
    <span>JUST DO IT.</span>
    <a href="#">λ‹«κΈ° X</a>
  </div>
</div>

<main>
  <div>
    <h1>Practice jQuery</h1>
  </div>
</main>

<footer>
  <div><small>jQuery μ—°μŠ΅ νŽ˜μ΄μ§€ μž…λ‹ˆλ‹€.</small></div>
</footer>

js

// $(document).ready(function () {});
$(function () {
  // $("main h1").css({ fontSize: 150, opacity: 1 }); // μ• λ‹ˆλ©”μ΄μ…˜ 없이 ν•œ λ²ˆμ— λ³€κ²½
  $("main h1").animate({ fontSize: 150, opacity: 1, color: "red", "font-size": 150 }, 2000, "linear"); // μ• λ‹ˆλ©”μ΄μ…˜ 효과 적용
  /*
    A.animate({ key: value,... }, μ‹œκ°„, easing)
      - 색상 κ΄€λ ¨ 속성은 적용❌
      - css style 속성도 적용됨(fontSize = "font-size")
      - easing : swing / linear
  */

  $(".banner a").click(function () {
    $(".banner").animate({ height: 0, opacity: 0 }, 500);
    // $(".banner").slideUp(500); // μœ„μ™€ λ™μΌν•˜κ²Œ λ™μž‘
  });
});

예제2

css

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background: #d3d3d3;
}
h1 { font-weight: normal; }

.banner { background: #fff; }
.banner div {
  position: relative;
  max-width: 1000px;
  margin: auto;
  height: 80px;
}
.banner span {
  font-size: 3em; /* 16px * 3 */
  line-height: 80px;
  font-weight: bold;
}
.banner img { 
  height: 60px;
}
.banner a {
  position: absolute;
  top: 30px;
  right: 0;
}

main { 
  display: table; /* λΆ€λͺ¨ μš”μ†Œ */
  width: 100%;
  background: #818181; 
}
main > div { 
  display: table-cell; /* μžμ‹ μš”μ†Œ */
  height: 600px; 
}

.b1, .b2 {
  width: 150px;
  height: 150px;
  margin: 50px;
}
.b1 { background: powderblue; }
.b2 { background: thistle; }


footer { padding: 30px 0; } 
footer div {
  max-width: 1000px;
  margin: auto;
  text-align: right;
}
footer small {
  color: #fff;
  font-size: 0.8em;
}

html

<div class="banner">
  <div>
    <img src="./img/logo.png" alt="">
    <span>JUST DO IT.</span>
    <a href="#">λ‹«κΈ° X</a>
  </div>
</div>

<main>
  <div>
    <div class="b1"></div>
    <div class="b2"></div>
  </div>
</main>

<footer>
  <div><small>jQuery μ—°μŠ΅ νŽ˜μ΄μ§€ μž…λ‹ˆλ‹€.</small></div>
</footer>

js

// $(document).ready(function () {});
$(function () {
  $(".banner a").click(function () {
    $(".banner").animate({ height: 0, opacity: 0 }, 500);
    // $(".banner").slideUp(500); // μœ„μ™€ λ™μΌν•˜κ²Œ λ™μž‘
  });

  $(".b1").mouseover(function () {
    $(this).animate({ "margin-left": "1000px" }, 2000, "swing", function () {
      $(this).animate({ marginLeft: 50 }, 300);
    });
  });

  $(".b2")
    .mouseover(function () {
    $(this).animate({ marginLeft: "+=100px" }, 300, "swing");
  })
    .click(function () {
    $(this).animate({ marginLeft: "50px" }, 100, "swing");
  });
  // λ©”μ†Œλ“œ 체인 - μ„ νƒμžκ°€ 같은 경우 맨 μœ„ ν•œλ²ˆλ§Œ 적고 .으둜 μ—°κ²°
});

/*
    A.animate({ key: value,... }, μ‹œκ°„, easing, μ½œλ°±ν•¨μˆ˜)
      - 색상 κ΄€λ ¨ 속성은 적용❌
      - css style 속성도 적용됨(fontSize = "font-size")
      - easing : swing / linear
  */

좜λ ₯

  • μ΄λ―Έμ§€λ‘œ λŒ€μ²΄

예제1

예제2
μœ„μΉ˜μ΄λ™


πŸ”— μ°Έκ³  링크 & 도움이 λ˜λŠ” 링크





profile
.
이전 포슀트

230320 - classList μ‘μš© (νŒμ—…), jQuery(더 μΆ”κ°€ μ˜ˆμ •)

λ‹€μŒ 포슀트

230322 - form

0개의 λŒ“κΈ€