WEB기초/JQuery13 [jquery] jQuery Plugin 이용하기2 (170404) jQuery Plugin 이용하기2 Fortorama (이미지 슬라이드 플러그인) - 직접 만들지 않고도 플러그인을 이용하여 충분히 편리하고 쉽게 이미지 슬라이드를 만들 수 있다. - CDN을 이용한 Fotoramam Plugin 이용하기1. http://fotorama.io/set-up/ 에 접속한다.1. CDN을 복사하여 head에 붙인다. ( fotorama.css / fotorama.js )- CDN이 아닌 파일일 경우 경로 설정에 유의해야 한다.2. body에 img를 넣고 사용한다.3. http://fotorama.io/customize/ 에서 여러가지 customize를 이용해본다. ** 출력 결과 ** - Download를 이용한 fortorama 이용하기1. css폴더와 js폴더에 다운받.. 2017. 4. 4. [jquery] jQuery Plugin 이용하기 (170403) jQuery Plugin 이용하기 jQuery Plugin 사용 방법1. 이용할 plugin을 다운받는다.2. js 폴더에 plugin 파일을 넣는다.3. html 에 script 로딩을 한다.4. 이용한다. smoothScroll 이용 예 >1. 다운을 받는다. 2. js폴더에 다운받은 js파일을 넣는다. 3. 플러그인을 로딩한 후 action을 사용한다. - 이 때, option 항목을 확인하여 이용할 수 있다!- 동일한 방법으로 imgLiquid.js, lazyload.js를 이용해본다! lazyLoad (스크롤 내릴때 이미지 로딩하기) imgLiquid (이미지 비율 맞춰 일정크기로 출력하기) - 대략 이러한 형태로 이미지의 크기를 조정한다. - data-num, data-name 등 data-X.. 2017. 4. 3. [jquery] jQuery 응용 간단한 게임만들기 (170331) jQuery 입문 07 간단한 게임 만들기 스나이프 이미지가 마우스를 따라 다니도록 해 보세요. ANSWER > 일반화 시켜서 적용하기 총을 맞은 후 파편 날아가게 만들기 점수 : 0 ** 다시 만들어보기 ** 2017. 3. 31. [jquery] jQuery 입문 06 (170330) jQuery 입문 06 .eq( ) - $("p") 의 출력값 : [p,p,p,p,p]- $("p")[0] 의 출력값 : 김구라- $("p").eq(0) 의 출력값 : [p] - 이 때, $("p")[0]는 이미 jquery객체가 아니므로 jquery이용이 불가능하다.- $("p").eq(0)는 jquery 이용이 가능하다. jquery의 for문 .each - .each를 이용하면 배열의 갯수만큼 반복한다.- jquery의 loop- each(function(i, item){ }); - i 는 index값, item은 this값 (ex: p1) 을 담고있다. 예제1 > 예제2 > Each( )를 이용한 QUIZ >화살표를 누르면 한장씩 슬라이드 되도록 만들어보세요. ANSWER > ** 출력 결과 **.. 2017. 3. 30. 이전 1 2 3 4 다음
