#. jQuery 기초와 활용

Web Programming/Step3. HTML&CSS&JS 심화

#. jQuery 기초와 활용

눈떠보니 월요일 2023. 3. 6. 19:11

1. 제이쿼리 기초

팝업창 만들기

console.clear();

for ( let no = 1; no <= 3; no++ ) {
  console.log("no : " + no);
  /* 열기 */
  $('.btn-popup-' + no).click(function() {
    $('.popup-' + no).addClass('active');
  });
  
  /* 닫기 */ 
  $('.popup-' + no + ' > section > header > button').click(function() {
    $('.popup-' + no).removeClass('active');
  });
}

전체 코드

ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ

2. 제이쿼리 이벤트

마우스 커서 효과 적용하기

e.client : 마우스 커서의 좌표 값 가져오기

$(window).mousemove(function(e) {
  console.log("e.clientX : " + e.clientX);
  console.log("e.clientY : " + e.clientY);
});

마우스 커서 따라다니기

마우스 커서는 const로 정의하는게 정석

const $cursor = $('.cursor');

$(window).mousemove(function(e) {
  console.log("e.clientX : " + e.clientX);
  console.log("e.clientY : " + e.clientY);
  
  $cursor.css({
    top:e.clientY,
    left:e.clientX
  });
});

클릭이 안됨 해결 (div가 button을 가리면 클릭이 안되는것을 해결)

.cursor {
  pointer-events:none;
}

기존 커서 숨기기

* {
  cursor:none;
}

커서 둥글게, 가운데 정렬, 작게 만들기

.cursor {
  border-radius:50%;
  background-color:rgba(255,0,0,0.4);
  transform:translateX(-50%) translateY(-50%);
}

커서 쉐도우 만들기

.cursor-shadow {
  border-radius:50%;
  background-color:rgba(0,255,0,0.4);
  transform:translateX(-50%) translateY(-50%);
}

커서 쉐도우도 따라다니도록

console.clear();

const $cursor = $('.cursor');
const $cursorSahdow = $('.cursor-shadow');

$(window).mousemove(function(e) {
  $cursor.css({
    top:e.clientY,
    left:e.clientX
  });
  
  $cursorSahdow.css({
    top:e.clientY,
    left:e.clientX
  });
});

커서 쉐도우는 조금 느리게 따라 오도록, 커서가 움직일 때는 가만히

.cursor-shadow {
  transition:top .3s .1s, left .3s .1s;
}

초기에는 마우스 커서가 안보이도록

.cursor {
  top:-300px;
  left:-300px;
}

커서에는 화이트, 커서 쉐도우에는 블랙 / 커서가 쉐도우 위에 나오도록

.cursor {
  background-color:white;
  z-index:100;
}

.cursor-shadow {
  background-color:black;
  z-index:99;
}

특정 요소에 커서를 올리면 커서가 커지도록

CSS

.need-to-cursor-big .cursor {
  width:100px;
  height:100px;
}

.need-to-cursor-big .cursor-shadow {
  width:200px;
  height:200px;
}

('.cursor-big').mouseenter(function() {
  $('html').addClass('need-to-cursor-big');
});

$('.cursor-big').mouseleave(function() {
  $('html').removeClass('need-to-cursor-big');
});

내용을 가리지 않도록 마우스 커서에 블렌드 효과 적용

.cursor {
  mix-blend-mode:difference;
}

.cursor-shadow {
  mix-blend-mode:difference;
}

마우스 커서 속도 크기, 조절

.cursor {
  width:10px;
  height:10px;
  transition:width .1s, height .1s;
}

.cursor-shadow {
  width:20px;
  height:20px;
  transition:width .1s, height .1s, top .1s, left .1s;
}

밑줄 애니메이션, POSITION 함수

마우스 엔터시 엘리먼트의 위치&너비 알아내기(왼쪽, 위에서 부터 얼마나 떨어져 있느냐)

console.clear();

$('section > ul > li').mouseenter(function() {
  const $this = $(this);
  
  const position = $this.position();
  
  console.log("position.left : " + position.left);
  console.log("position.top : " + position.top);
  console.log("width : " + $this.outerWidth());
});

width() : 순수 너비
outerWidth : padding과 border까지 합한 너비

커서에 따라 엘리먼트 밑에 밑줄 움직이기

console.clear();

const $bottomLine = $('section > div');

$('section > ul > li').mouseenter(function() {
  const $this = $(this);
  
  const position = $this.position();
  
  const width = $this.outerWidth();
  
  console.log("position.left : " + position.left);
  console.log("position.top : " + position.top);
  console.log("width : " + width);
  
  $bottomLine.css({
    left:position.left,
    top:position.top + 40,
    width:width
  });
});

3. 이미지 갤러리 사이트, 사이드 바 - 제이쿼리 적용

사이드바 아이콘 크기 조절 & 회전 & 위치 조절

.side-bar:hover .side-bar__status-ico {
  top:96px;
  left:-5px;
  transform:scale(0.5) rotate(-90deg);
}

console.clear();

function SideBar__init() {
  const $statusIco = $('.side-bar__status-ico');
  
  $('.side-bar__menu-box-1 > ul > li:not(:last-child)').mouseenter(function() {
    const $this = $(this);
    const position = $this.position();
    
    console.log("postion.left : " + position.left);
    console.log("postion.top : " + position.top);
    
    $statusIco.css('top', position.top + 16);
  });
  
  $('.side-bar__menu-box-1 > ul > li:not(:last-child)').mouseleave(function() {
    $statusIco.css('top', '');
  });
}

SideBar__init();

전체코드

https://sihyun1118.tistory.com/111

4. 회색 사이트, 메뉴바 구현, 드롭다운 - 제이쿼리 적용

stopPropagation(), preventDefault(), retun false

부모 엘리먼트에 전달을 안함 설정

$('section').click(function() {
  alert('section 클릭됨');
});

$('div').click(function() {
  alert('div 클릭됨');
});

$('article').click(function(e) {
  alert('article 클릭됨');
  e.stopPropagation();
});

$('nav').click(function() {
  alert('nav 클릭됨');
  // e.preventDefault();
  return false;
});

$('a').click(function(e) {
  //e.stopPropagation();
  //e.preventDefault();
  return false;
})

전체코드

https://sihyun1118.tistory.com/111

강의 : https://class101.net/ko/classes/5fb5d4c5c64f67000daa54de/lectures/5fbb0fec7902290013fb29b8

티스토리