728x90 반응형 javascript/jQuery30 [JAVASCRIPT/JQUERY]스크롤 이벤트를 이용한 header 만들기 스크롤을 감지해서 스크롤을 내리면 header가 상단으로 고정되고 형식이 바뀝니다. 다시 스크롤을 올리면 원래되로 되돌아옵니다. mousewheel 이벤트를 이용해서 스크롤을 감지합니다. e.originalEvent.wheelDelta; 값을 이용해 스크롤을 올리고있는지 내리고 있는지 감지합니다. $(window).scrollTop(); 현재 스크롤의 위치를 가져옵니다. addClass와 removeClass를 이용해 다른 css를 적용해줍니다. See the Pen main > nav by gahyun (@gahyun) on CodePen. 2019. 4. 11. [JAVASCRIPT/JQUERY]플러그인 쓰지않고 이미지 슬라이드 만들기 ul li를 이용해 이미지 리스트를 만들고, g_item으로 이미지 슬라이드의 이미지의 현재위치를 알려주고 이미지간의 이동이 가능한 컨트롤러를 만듭니다. float : left 를 써서 리스트를 가로로 정렬합니다. .gallery ul li {float: left; width: 300px;} ul는 li의 갯수만큼 width값이 커지지만 , .gallery ul{width: 300%;} ul을 감싸고 있는 .gallery는 이미지를 3개만 보여줄 크기로 제한합니다. .gallery{width: 900px} 이미지의 흐름이 자연스러워 보이기 위해서는 양쪽 끝에 처음시작에는 마지막 이미지를 추가하고, 맨 마지막에는 첫번째 이미지를 추가해야합니다. 양쪽에 이미지가 없을경우 현재 다음이미지가 왼쪽에서 오른쪽으로.. 2019. 4. 11. [JAVASCRIPT/JQUERY]서브페이지에 사이트 이동경로를 나타내는 방법 (select) 셀렉트(select)를 이용해 현재 어느 메뉴에 있는지 알려주고, 다른 메뉴 페이지로 이동 가능하도록 구현하기 //스크립트를 이용해 현재 페이지에 해당하는 메뉴가 선택되도록 한다. $("#sel1").find("option").eq(stop).prop("selected",true); $("#sel2").find("option").eq(sbot).prop("selected",true); //select에 onchange 이벤트를 이용해 값이 변경되면 해당 링크로 이동하도록한다. onchange="if(this.value) location.href=(this.value);" See the Pen 셀렉트(select)로 서브메뉴 location by gahyun (@gahyun) on CodePen. 2019. 4. 10. [JAVASCRIPT/JQUERY] Jquery UI (draggable/droppable)옵션설정하기 https://jqueryui.com jQuery UI를 쓰기 위해서는 다음과 같은 js 파일이 필요하다. //jQuery버전맞추기 https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js //jQuery UI http://code.jquery.com/ui/1.8.17/jquery-ui.min.js //jQuery UI를 모바일에서 쓰기 위해 추가 (모바일 버전이 필요없다면 안써도됨) https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js See the Pen XQpOLv by gahyun (@gahyun) on CodePen. d.. 2019. 4. 10. 이전 1 ··· 3 4 5 6 7 8 다음 728x90 반응형
