본문 바로가기

script3

[Swiper] 똑같은 스와이퍼 반복문으로 편하게 만들기 #swiper #script #스와이퍼여러개만들기  옵션은 다 똑같은데 스와이퍼 코드를 이렇게 작성했던 적이 있습니다.지금은 배열을 사용해서 편하게 쓰고 있어서 정리합니다.   탭바 안에 똑같은 레이아웃의 스와이퍼가 들어있는 디자인이 많더군요.그 때 스와이퍼를 스크립트를 하나씩 작성하는 것이 아닌, 배열/반복으로 한번에 만드는 방법입니다. HTML                                               Swiper                                 Swiper is~                                                                           Swiper                          .. 2024. 8. 25.
[jQuery, script] 스크롤 이동 #스크롤이동 #scrollto #animation #script #jquery 안녕하세요. Gi-1의 개발일기입니다. 퍼블리싱을 하다보면 컨텐츠 영역으로 바로 이동하게끔 ~~url/#이동할컨텐츠영역id를 이용하는 경우가 많은데요, css로 스크롤 애니메이션 을 줄 수도 있지만 저는 script가 편하더라구요! css로 이용할 경우 html{ scroll-behavior:smooth; } script function moveScroll(){ var ingSec = document.querySelector("#id"); var ingLocation = ingSec.offsetTop; if(ingLocation == $(document).scrollTop()){ return false; } // 이미 스크롤 .. 2023. 2. 10.
[jQuery] 클릭 시 모달,팝업 띄우기 / 메뉴 팝업창 만들기 #jQuery #모달 #팝업 #견적문의 안녕하세요. GI-1의 개발일기 입니다. 흔히 모달,팝업은 쉽게 띄울 수 있습니다. 이번에는 카페의 온라인 견적문의 할 때 필요한 메뉴 팝업창을 만들어 보겠습니다. 1. HTML [견적담기 버튼] 아메리카노 (HOT / ICE) 3,000원 견적담기 [팝업] × 2. script function menuModal(e){ var ModalMenuImg = $(e).parent(".esti_menu_check").siblings(".esti_menu_left").find("img").attr("src"); // 메뉴 이미지 src를 가져옴 var ModalMenuTxt = $(e).parent(".esti_menu_check").siblings(".esti_menu_l.. 2022. 12. 3.