본문 바로가기
728x90
반응형

javascript71

마우스 따라 움직이는 효과 See the Pen Untitled by gahyun (@gahyun) on CodePen. 마우스가 li 에 접근하면 마우스 위치로 .box 를 이동한뒤 가운데로 animate 를 통해 이동시킨다 (마우스를 따라 움직이는것처럼 보이도록) 활성화된 li에 active 클래스를 추가 이때 기존 active 는 영역 밖으로 이동시켜 버려야함! (mouseleave 이벤트를 등록하지만 가끔 제대로 동작하지 않는 경우도 있어서 추가해줌 - 무조건 1개만 active 되도록) $(document).on('mouseenter','li:not(.active)',function(e){ target = $(this).children('.box'); liTop = $(this).offset().top; liLeft = .. 2022. 9. 1.
jquery ui - datepicker css 변경해 디자인 적용하기 See the Pen Untitled by gahyun (@gahyun) on CodePen. 2022. 8. 31.
여러개를 제어할때 쓰는 querySelectorAll 탭메뉴 버튼 구현 (forEach 사용) See the Pen Untitled by gahyun (@gahyun) on CodePen. let itemList = document.querySelectorAll('li'); //querySelectorAll를 이용해 li를 전부 불러온다 (리스트형태로 itemList에 저장됨) itemList.forEach(function(item){ item.addEventListener('click',function(){ itemList.forEach(function(e){ e.classList.remove('active'); }); item.classList.add('active'); }); }); 리스트형태로 갖고 있기 때문에 forEach를 이용해 반복한다 이때 .. 2022. 8. 31.
select 플러그인 https://slimselectjs.com/ Slim Select Slim vanilla javascript select dropdown slimselectjs.com 2022. 8. 30.
728x90
반응형