본문 바로가기
728x90
300x250
SMALL

javaScript/J Query & 스크립트138

이미지 갤러리 독립적인 함수 만들기 https://moo-you.tistory.com/122?category=310832 이미지 갤러리 함수만들기 예제 이미지 배열 시작 위치는 100*100 위치로 시작시 이미지를 2열 200*200 크기로 출력 시작버튼 클릭 시 이미지를 3열 150*150크기로 출력 함수를 이용해 최대한 유지보수하기 쉽게 만들기 저번에 했던 이미지 갤러리 함수는 갤러리 함수 내부에서 images변수를 사용하기 때문에 이외의 이미지를 독립적으로 사용할수 없다. 그래서 이번에는 원하는 이미지 그룹을 선택해서 독립적으로 사용할수 있고 이미지 정보를 매개변수로 만들어서 넘기는 갤러리를 만들어보자 기존코드 이미지를 찾아서 images 변수에 넣고 이미재 개수를 구한다음 이미지 개수만큼 반복문 실행 이미지를 차례로 img 변수에 .. 2019. 6. 25.
이미지 갤러리 함수만들기 예제 이미지 배열 시작 위치는 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.
728x90
반응형
LIST