본문 바로가기

jQuery54

제이쿼리로 셀렉옵션 값에 맞춰 input 에 val 밸류값 넣기 완성본을 보면 벨류로 셀렉 옵션 선택시 관련 키워드가 자동으로 적용된다. html로 구조 만들어주고 css 처리 인라인블럭시 간격생김으로 float 으로 처리 전체 float 지정시 부모의 높이가 날라가므로 clearfix 처리 clearfix 확인 css 로 나머지 위치를 잡아준다 벨류값 넣기 기존 사이트에 data-val 이라고 벨류값이 들어가있다. 우리도 벨류값을 넣어주자 벨류속성 브랜드전체() - 능이삼계죽 본죽(BF101) - 능이삼계죽 본죽&비빔밥(BF102) - 차돌주꾸미비빔밥 본도시락(BF103) - 보양 장어오리구이 한정식 본설렁탕(BF104) - 양곱창뚝배기 - 최초 input의 value는 능이삼계죽임 - .select_custom .select_list a 클릭시 data 속성값을 .. 2022. 11. 1.
제이쿼리 셀렉옵션 커스텀 셀렉옵션 분석하기 토글이 아닌 a로 감고 리스트형식 분석 본아이에프는 버튼식을 넣었음 롯데몰의 셀렉옵션을 응용하여 본아이에프에 적용해보기 $('.select_custom .select a').on('click', function () { console.log($(this).text()); // select 커스텀 $('.select_custom .btn_select').on('click', function () { $(this).toggleClass('on'); $('.select_custom .select').toggle(); }); html 메서드는 태그 까지 다 가지고옴 $('.select_custom .select a').on('click', function () { // $(this).text(.. 2022. 11. 1.
제이쿼리 util - toggle , trigger('focus'), tabindex="0" 검색표시 클릭시 아이콘 변경 & 하위요소 나오게 하기 먼저 css 로 자리와 on 적용시 바뀔수 있게 설정 #header .util_wrap .btn_toggle { width: 51px; height: 51px; margin-left: 5px; border: 1px solid rgba(225, 225, 225, 0.5); text-indent: -9999px; background: url(../images/gnb_util.png) no-repeat; float: left; } #header .util_wrap .btn_toggle.on { background-position-y: -50px; background-color: #FFF; } 제이쿼리 함수 입력 $('#header .util_wrap .bt.. 2022. 10. 31.
제이쿼리 애니메이션 효과 gnb 메뉴에 마우스를 가다대면 창이 늘어나며 하위요소 보이게 하기 css, before 제이쿼리 수정 너무길어 함수명을 에미네이션으로 한번더 감아준다 $(function () { // header, gnb 바 애니메이션 function animateHeader() { $('#header .gnb>li').on('mouseenter', function () { // 각 li에 마우스를 올렸을때 자신 안쪽depth02 보여주고 나머지 형제안의 depth02안보이게 $(this).find('.depth02').show().parent().siblings().find('.depth02').hide(); $('#header').addClass('on'); // 각 li안의 >a(포지션이 아니어도됨)의 기준(.i.. 2022. 10. 31.
제이쿼리 애니메이션 바 추가 mouseenter 기존코드 뜯어보기 $(function () { $('#header .gnb>li').on('mouseenter', function () { // 각 li에 마우스를 올렸을때 자신 안쪽depth02 보여주고 나머지 형제안의 depth02안보이게 $(this).find('.depth02').show().parent().siblings().find('.depth02').hide(); $('#header').addClass('on'); // 각 li(포지션이 아니어도 됨) 의 기준(.inner)에서의 좌우 위치 var posX = $(this).find('>a').position().left; var w = $(this).find('>a').outerWidth(); $('#header .gnb_bar').css.. 2022. 10. 31.
제이쿼리 li 메뉴 > depth02 보이기 $(function () { $('#header .gnb>li').on('mouseenter', function () { // 각 li에 마우스를 올렸을때 자신 안쪽depth02 보여주고 나머지 형제안의 depth02안보이게 $(this).find('.depth02').show().parent().siblings().find('.depth02').hide(); $('#header').addClass('on'); }); $('#header').on('mouseleave', function () { $('#header').removeClass('on'); // 헤더에서 마우스 빠졌을때만 서브메뉴 안보이게 $('#header .gnb .depth02').hide(); }); }); 원본참고 https://ww.. 2022. 10. 31.
제이쿼리 스크롤+애니메이션 공통클래스로 효과 주기 '[class*=animate_fade]' animate_fade 를 포함하는 .each 각각 선택하여 반복하라 var st = $(this) 윈도우임 wiondow 가능 이만큼을 높이를 빼줘야한다. $(function () { $('[class*=animate_fade]').each(function () { // each안에서 $(this)는 앞에서 선택된 요소 var _this = $(this); $(window) .on('scroll', function () { var posY = _this.offset().top; var st = $(this).scrollTop(); console.log(posY, st); if (st >= posY - $(this).outerHeight() + 150) { _t.. 2022. 10. 28.
스크롤 애니메이션 AOS 라이브러리 사용해보기 페이지 방문시 다양한 효과를 볼 수 있다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 하단으로 내리면 제공 소스를 볼수있음 CDN? content distribution network 의 약자 서브로 전송되는 데이터이 때문에 느려서 직접 다운받아보자 페이지 상단 이 귀여운 캐릭터 클릭시 깃헙으로 이동 내용을 보면 v2 버전이 더안정화 됬다고 나온다 v2 버전 이동후 깃헙에서 파일을 다운로드하자 downloadzip 각각 css js 파일에 넣어준다. 링크연결 필수! 초기화코드 복사 자바스크립트 파일에 소스 코드 추가 사.. 2022. 10. 28.
제이쿼리 스크롤시 애니메이션 추가 라이브러리를 계속 쓰는건 권장하지않음 숙지하여 응용할 수 있게 먼저 예제를 만들어보자 https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 기존 AOS 를 뜯어보면 공통클래스 사용하였다 이유는? 스크롤로 각각 위치판단후 제이쿼리를 개별 적용하게되면 변수가 너무 많기때문 초기화 코드 공통클래스를 사용하여 적용해보자 /* 애니메이션 공통 */ .animate_fade_down { transform: translate(0, -100px); opacity: 0; transition: all 1s; } .animate_fade_up { t.. 2022. 10. 27.
제이쿼리 스크롤 스크롤위치 $(window).scrollTop(); 문서에서의 요소 위치 $('요소').offset().top 기준에서의 좌우위치 $('요소').position().left 스크롤을 하단으로 내릴때 컨텐츠가 나타나는 이벤트를 제이쿼리로 표현해보자 . 1.요소가 가장 위로 스크롤 되는것을 판단 먼저 스크롤이 찍히는 위치를 파악하기 위해 제이쿼리 콘솔로 찍어보자. 문서전체에서 요소의 위아래 위치 판단 $(function () { console.log($('.main_about .box').offset().top); }); offset 메서드 안에 top 속성을 가져와라. (top은 속성이기에 괄호 없음) 문서가장 위에서 요소의 수직위치를 판단 offset 메서드 : 선택한 html 요소의 오프센 좌표를 가져.. 2022. 10. 27.
제이쿼리 기본정리 요소선택 이벤트바인딩 탐색메서드 효과메서드 등등 제이쿼리 생성자 함수 이름 호출 $() 문자열만 하는 경우 window 객체 키워드 의미 "" 필요없음 $(window) 자신이만든 객체를 선택할때 '' 사용 $('#header .gnb>li:nthchild(1)') 이벤트를 바인딩하는방식 $('#header .gnb>li').on('click', function(){ $(this) $(this).find('.depth02') $(this).siblings(); $(this).parent() $(this).closest('#header'); }); 제이쿼리 객체가 리턴됨 .on = addeventlitener 2개 인수가 들어감 이벤트 인수가 들어감 .on(이벤트명 , 이벤트 핸들러 콜백함수(익명함수) :.. 2022. 10. 27.
제이쿼리 슬라이더 응용 동일하게 html 구성 후 제이쿼리 초기화 코드 복붙 > 클래스명 새로 지정하기 var characterSwiper = new Swiper('.main_character .swiper-container', { slidesPerView: 'auto', spaceBetween: 30, scrollbar: { el: '.swiper-scrollbar', }, 슬라이더 가운제부터 시작하게 하기 var characterSlider = new Swiper('.main_character .swiper-container', { slidesPerView: 'auto', spaceBetween: 50, // active슬라이더 가운데로 centeredSlides: true, scrollbar: { el: '.swiper-.. 2022. 10. 26.

티스토리툴바