프로그래밍 예제/ 예제 (11) 썸네일형 리스트형 특정영역에 스크롤 넘으면 클래스 추가 $(function(){ var sec5Img = []; var sec5Top = []; var sec5ImgLen = $('.sec5 .move').length; var scrollTop; var sec5Top; $(window).load(function(){ for (var i = 0; i < sec5ImgLen; i++) { sec5Img[i] = $('.sec5 .move').eq(i); sec5Top[i] = $('.sec5 .move').eq(i).offset().top; } }).scroll(function(){ scrollTop = $(this).scrollTop(); var viewGuide = scrollTop+$(window).height()/2; for (var i = 0; i < .. 브라우저 창에 따라 클래스 변화시키기 $(window).resize(function() { var width = document.documentElement.offsetWidth, sizeMode = width > 1440 ? 4 : width > 1023 ? 3 : width > 767 ? 2 : 1; document.documentElement.className = document.documentElement.className.replace(/ *s[1-4][1-4]?/g, '') +(' s'+ sizeMode +' s'+ (3 > sizeMode ? 12 : 34) + (360 > width ? ' s0' : ''));}); resize 될 때 변수 sizeMode 값의 변화에 따라 정규표현식 문법 사용하여,기존 클래스 변환시키기 반응.. 클릭으로 스크롤 이동 (메뉴) 자바스크립트 예제 $(".built-in-lnb a").on('click', function(event) { if (this.hash !== "") { event.preventDefault(); var hash = this.hash; $('html, body').animate({ scrollTop: $(hash).offset().top }, 600, function(){ window.location.hash = hash; }); } }); .href -> the entire of a url.hostname -> the hostname of a url (도메인 이름 또는 url 의 ip 주소를 나타내는 문자열).host -> the hostname and port number of a url.hash -> hash 속성은 .. userAgent를 사용하여, 사용자 브라우저 확인하기 'use strict'; var ua = navigator.userAgent, browser = $.browser = browser = {} , support = $.support, ie = ua.match(/(?:msie ([0-9]+)|rv:([0-9\.]+)\) like gecko)/i), i; browser.firefox = (/firefox/i).test(ua);browser.webkit = (/applewebkit/i).test(ua);browser.chrome = (/chrome/i).test(ua);browser.opera = (/opera/i).test(ua);browser.ios = (/ip(ad|hone|od)/i).test(ua);browser.android = (/android/i.. 스크롤 작동 중 내리는 스크롤과 올리는 스크롤 구분하기 자바스크립트 var prevScrollTop = 0;var nowScrollTop = 0; function wheelDelta(){ return prevScrollTop - nowScrollTop > 0 ? 'up' : 'down';}; $(window).on('scroll', function(){nowScrollTop = $(this).scrollTop();if(wheelDelta() == 'down'){}if(wheelDelta() == 'up'){}prevScrollTop = nowScrollTop;}); 변수 nowScrollTop는 초기값은 0으로 시작하나, $(window).on('scroll', function(){}); 으로 스크롤 작동마다 현재 스크롤 탑 값으로 할당됨. 그렇기에 스크롤 내리는 작동 .. 클릭하면 지정해둔 위치로 스크롤 이동(스크롤 변경) $(function(){ var scrollTop = $(window).scrollTop(); $('.desc a').click(function(){ var captionTop = $('.ft-caption').offset().top; $('html, body').animate({scrollTop : captionTop}, 600); return false; });}); 변수 captionTop는 '.ft-caption'의 좌표 중 top의 값 '.desc a'를 클릭하면 'html, body'의 scrollTop이 captionTop로 변경return false;로 a 태그의 기본 동작 취소(버블링) 자바스크립트에서 vw로 단위 주기 var width30vw = parseInt($(window).width() * 0.3) + 'px'; resize 될 때마다 실행되어야 함변수 width30vw는 윈도우 width 값의 30프로에 단위를 붙여줌 반응형 사이트 만들기(반응형 속성 추가) 자바스크립트 function responsiveImg(){ var width = document.documentElement.offsetWidth;//var width = $(window).width() var sizeMode = width > 1440 ? 4 : width > 1023 ? 3 : width > 767 ? 2 : 1; //var sizeMode = width > 1440 ? 4 : width > 1023 ? 3 : width > 767 ? 2 : 1; document.documentElement.className += (' s'+ sizeMode + (360 > width ? ' s0' : '')) ; if(sizeMode == 4){ globalLayout = 'desktop'; }else if(s.. 이전 1 2 다음
