728x90 반응형 javascript/jQuery30 [ScollLeft()] 모바일 메뉴 좌우스크롤에서 선택된 메뉴 쪽으로 스크롤 되도록 하기 $('.tabmenu ul li a').on('click', function(){ //메뉴 중에 하나를 클릭하면 $('.tabmenu ul li').removeClass('on'); // 전체 on 삭제 $(this).parent().addClass('on'); // 선택된 부모 li에게 on 부여 var left = $('.tabmenu ul li.on').offset().left; //on이 부여된 li 의 위치 (스크롤된 상태 기준으로 계산됨) var curLeft = $('.tabmenu').scrollLeft(); //현재 스크롤 위치 $('.tabmenu').animate({scrollLeft : curLeft+left}, 400); //400ms 동안 scrollLeft의 위치를 (curLe.. 2022. 9. 13. jquery ui - datepicker css 변경해 디자인 적용하기 See the Pen Untitled by gahyun (@gahyun) on CodePen. 2022. 8. 31. [jquery플러그인]마우스로 배경이미지에 물결을 일으키는 효과를 주는 water-ripple 플러그인 *대로 적용되지 않는다면 서버에 이미지파일과 플러그인을 적용할 html 파일이 올려져 있는지 확인.. 그냥 로컬에서는 제대로 적용되지 않는다.. 아니면 코드펜이나 vscode의 라이브서버 같은 기능을 활용 적용방법은 아주 간단하다 See the Pen warter-ripple by gahyun (@gahyun) on CodePen. 필요한 파일은 jquery 파일과 플러그인의 js 파일이 필요하다. https://www.jqueryscript.net/demo/jQuery-Plugin-For-Water-Ripple-Animation-ripples/js/jquery.ripples.js 원하는 영역에 ripples함수를 이용해 옵션값을 설정해주면 마우스의 움직임이나 클릭에 따라 물결과 파동이 일어난다. 이때 .. 2019. 7. 5. [jQuery]모달창 만들기 화면가운데 위치하도록 설정 fixed를 쓰는이유는 스크롤 위치에 상관 없이 화면 가운데에 위치하도록 하기 위해서 { position:fixed; top:50%; left:50%; transform: translate(-50%,-50%); } 함수를 통해 매칭되는 모달창을 연다 모달열기1 function openModal(modalname){ document.get $("#modal").fadeIn(300); $("."+modalname).fadeIn(300); } #modal을 따로 놓고 투명 검정 배경으로 설정 => 투명검정부분이나 닫기버튼을 눌러 창 닫기 $("#modal, .close").on('click',function(){ $("#modal").fadeOut(300); $(".modal-con.. 2019. 6. 20. 이전 1 2 3 4 ··· 8 다음 728x90 반응형