coding/jQuery (16) 썸네일형 리스트형 0723 / jQuery - mousewheel (function($){ // 변수 var win = $(window); var viewDoc = $('html, body'); var info = $('.info'); var recommend = true; var countScroll = 0; var winH; // 기능 // 함수 var setWinHFn = function(){ winH = win.outerHeight(); info.css({height:winH + 'px'}); }; var setScrollFn = function(n){ viewDoc.animate({scrollTop:n + 'px'}, function(){ recommend = true; }); }; // ================================= setWin.. 0723 / jQuery - landing (function($){ //jQuery // 변수 var win = $(window); var part = $('.part'); var li = part.find('li'); // 기능수행 var winH = win.outerHeight(); // window브라우저의 (margin,padding,border)포함 높이값 var setLiFn = function(scroll){ // li 각각수행 var liSelect; // = li.eq(0); var liOffset; // = liSelect.offset().top; var setOffset; // = liOffset - (winH / 3 * 2); // liOffset = winH - (winH/3); var resultN; var i=0; //.. 0722 / jQuery - parallax _02 생성 (function($){ //jQuery /* // 1. event - scroll -> 스크롤된 값을 파악 ( scrollTop() ) // 2. background-position : 0~100% // 3. 화면의 하단(시작부분) 상단에 있는 영역(끝부분) // 4. 화면의 영역을 0~100%로 구분하는 방법 */ // 변수 var win = $(window); var winH = win.outerHeight(); var part = $('.part'); var partLi = part.find('li'); // 201. partLi의 첫번째( eq(0) )의 시작위치가 (브라우저화면의 아래부분에서 나타나는 시점) 0에서부터 시작 // 스크롤값에서 partLi.eq(0)의 offset().top 만큼.. 0722 / jQuery - parallax 생성 (function($){ // jQuery // .part가 위에서 얼만큼 떨어져있는가? var part = $('.part'); var partOffset = part.offset().top; console.log('offset part:', partOffset); // 화면 스크롤시 스크롤값이 얼만큼 움직였는가? var win = $(window); var winH = win.outerHeight(); // 브라우저의 document 보이는 화면 높이 만큼 win.on('scroll', function(){ var winScroll = win.scrollTop(); console.log('window scroll:', winScroll); // 스크롤 값이 이동한만큼이 브라우저의 화면기준 높이에서 이.. 0715 / jQuery - rwd_반응형 브라우저 (function($){ $.ajax({ url:'../data/device_type.json', context:document.body }).done(function(data){ // $.ajax()로 불러오는 모든 내용은 매개변수로 불러오게 된다. // 비동기식으로 처리되기 때문에 시간이 걸린다. var importDevice = data; // 1. 접속 브라우저 환경 // 2. 브라우저의 크기값 파악 // 3. 각 디바이스 환경을 외부의 파일로 내보내서 처리 // 변수 var win = $(window); // 2. 접속 브라우저 환경 / 반응형이 가능하냐 불가능하냐 체크 var browserSetFn = function(){ // var browser = ['chrome','safari','op.. jQuery - scroll (move 기능 추가) 만들기 (function($){ // jQuery // 1. .top_move 버튼 클릭시 상단으로 이동 // 2. 기존의 임시링크는 x // 3. #navBox내부의 a요소를 클릭시 해당 내용의 위치로 스크롤 // 4. #headBox의 높이값 만큼 덜 움직이게 // 변수 // var win = $(window); var doc = $('html,body'); var headBox = $('#headBox'); var navBox = $('#navBox'); var navLink = navBox.find('a'); var topMove = $('.top_move'); var wrapOffset = $('#wrap').offset().top; // headBox높이값 파악 var headH = headBox.o.. jQuery - scroll 만들기 (function($){ // jQuery // 1. 스크롤시 이동되는가 확인 // 2. 스크롤 값 고정 // 변수 var part = $('.part'); var p_01 = $('.position_01'); var p_02 = $('.position_02'); var p_03 = $('.position_03'); // 스크롤 위치값 확인 var scrollPositionFn = function(){ var st = $(window).scrollTop(); // scrollTop : 스크롤 바의 위치 p_01.text( st ); }; // 떨어진 위치값 파악 / offset : 지정한 박스가 위에서부터 (어느기준으로부터) 얼만큼 떨어져 있느냐 var offsetTopFn = function(){ va.. jQuery - banner (fade & move 기능 추가) 만들기_2 (function($){ //jQuery // 변수 선언 ========================================== var banner = $('.banner_02'); var indicatorArea = banner.find('.indicator'); var indicator = banner.find('.indicator'); var indiLi = indicator.find('li'); var indiLiLink = indiLi.find('a'); var viewCount = banner.find('p'); var totalNum = viewCount.find('.total'); var nowNum = viewCount.find('.now'); var playArea = banner.. 이전 1 2 다음