728x90 300x250 SMALL javaScript545 이미지 갤러리 함수만들기 예제 이미지 배열 시작 위치는 100*100 위치로 시작시 이미지를 2열 200*200 크기로 출력 시작버튼 클릭 시 이미지를 3열 150*150크기로 출력 함수를 이용해 최대한 유지보수하기 쉽게 만들기 $(document).ready(function() { // 이미지 찾기. var $images = $("#container1 img"); $("#btnStart").click(function(){ // 이미지 개수 구하기. var length = $images.length; // 이미지 배열하기. for (var i = 0; i < length; i++) { // n번째 이미지 구하기 var $img = $images.eq(i); // 위치 값 구하기 var x = 100 + ((i % 3) * 200); .. 2019. 4. 22. 업다운 상하 롤링 스크립트 vticker롤링 업앤다운 롤링은 이미 예전에 포스팅했었지만 https://moo-you.tistory.com/108 이 경우에는 슬라이드 될 항목들이 올라가다가 끝에 다다르면 다시 내려오는 형태이다 반면에 이번에 소개할 스크립트는 제일 위에 항목이 보여지는 영역 밖으로 나가면 항목 제일 밑으로 이동하게 된다. 그래서 이번에는 vticker롤링 스크립트를 사용한 업다운 롤링이다. http://richhollis.github.io/vticker/ vTicker richhollis.github.io 여기서 다운받아서 사용할 수 있다. html Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Ut enim ad minim veniam.. 2019. 4. 21. parent / appendTo 해당 엘리먼트를 특정위치의 부모노드에 넣기 새로 생성된 div가 특정 위치 안에 있어야 할경우 $( "#id" ).appendTo( $( ".class" ) ); appendTo를 이용해서 이런식으로 넣어주면 된다. 해당 아이디 값이 해당 클래스 값으로 들어간다 그러나 옮겨야할 위치에 해당하는 클래스와 같은 이름이 많으면 모든 클래스에 id 값이 포함돼서 대략 난감한 상황이 된다. var parentTag = $( "#id1" ).parent(); $( "#id2" ).appendTo( $( parentTag ) ); 그래서 parent를 이용해서 이렇게 해줌 변수로 지정 해서 특정 id 값의 부모값을 넣고 여기로 이동하도록 하는 방식이다. 부모의 부모 위치도 가능하다 var parentTag = $( "#id" ).parent().parent(); 2019. 4. 19. 함수기능 소개 1. 중복코드 제거해주고 코드를 재사용할수 있게 해준다 2. 구조를 나눌수 있다. - 기능별로 함수를 만들어서 구분해줄수 있다. 예를 들어서 슬라이드를 만든다면 기능1 - 오토플레이 시작, 기능2 - 오토플레이 멈추기, 기능3- 이전 이미지 보이기, 기능 4- 다음 이미지 보이기 이런식으로나눌수 있다 이걸 만약에 하나의 함수에 구현하면 나중에 문제 있는 코드를 찾거나 재사용하기가 힘들어진다. 함수와 반복문의 차이 함수 : 특정 기능을 하는 일종의 로직을 다시 재사용하는 기능으로 필요할때 언제든지 함수를 호출해서 사용할수 있다. 반복문 : 특정 구문을 반복해서 사용할때 사용하는 기능으로 한번 사용하면 다시 재사용할수 없고 다시 사욜하려면 복사해서 사용해야 한다. 함수만드는 방법 1. 중복코드 제거및 코드 .. 2019. 4. 18. 이전 1 ··· 119 120 121 122 123 124 125 ··· 137 다음 728x90 반응형 LIST
