웹디자인기능사 실기 | 유형별 jQuery 총정리

 

웹디자인기능사 실기 유형별로 메뉴, 슬라이드, 공지사항, 갤러리, 팝업창, 패밀리사이트에 대한 제이쿼리 모두 정리해봤습니다. 

 

 

메뉴

 

가로형 서브메뉴 하단 전체 — 네비게이션 hover

$('.subMenu').slideUp(0);
$('.nav_header').hover(function(){
    $('.subMenu').stop().slideDown('fast');
}, function(){
    $('.subMenu').stop().slideUp('fast');
});

 

가로형 서브메뉴 하단 전체 배경 — 네비게이션 hover, 배경 

$('.subMenu, .subMenuBg').slideUp(0);
$('.nav_header').hover(function(){
    $('.subMenu, .subMenuBg').stop().slideDown('fast');
}, function(){
    $('.subMenu, .subMenuBg').stop().slideUp('fast');
});

 

가로형 서브메뉴 하단 개별 / 세로형 서브메뉴 하단 개별 / 세로형 서브메뉴 우측 개별 — 메인메뉴 마우스엔터, 마우스리브

$('.subMenu').slideUp(0);
$('.mainMenu').mouseenter(function(){
    $(this).find('+ .subMenu').stop().slideDown('fast');
    $(this).parent().mouseleave(function(){
        $(this).find('.subMenu').stop().slideUp('fast');
    });
});

 

 

슬라이드

 

좌에서 우로 흘러가는 패턴 / 위로 올라가는 패턴 : 슬라이드 ul 이동

$(document).ready(function(){
    var num=1;
    setInterval(function(){
        if(num<3){
       	    $('.slide ul').animate({
            	left: '-=' + 1200;			// 우측으로 1200 이동 
                top: '-=' + 300;			// 위로 300 이동 
            }, 'slow');
       	    num++;
        } else {
            $('.slide ul').animate({
            	left: 0					/* 원위치 */
                top: 0					/* 원위치 */
            }, 'fast');
       	    num = 1;
        }
    }, 3000);
});

 

페이드인 / 페이드 아웃 : 슬라이드 li 페이드

var num=1;
$('.slide li').fadeOut(0);				// 일단 다 안보이게
$('.slide li').eq(num).fadeIn(0); 			// 첫번째만 보이게

setInterval(function(){
    if(num<3) {
    	num++;
    } else {
    	num=0;
    }
    $('.slide li').fadeOut('slow');			// 현재 슬라이드 페이드아웃
    $('.slide li').eq(num).fadeIn('slow');		// 다음 슬라이드 페이드인
},3000);

 

 

공지사항 / 팝업창 / 갤러리

 

공지사항 갤러리 

탭 클릭형 — 

$('.board .btn li').first().addClass('on');		/* 첫번째 탭버튼 활성화 */
$('.frame > div').first().fadeIn(0);			/* 첫번째 공지사항 프레임 보임 */

$('.board .btn li a').click(function(){
    $('.board .btn li').removeClass('on')		/* 탭버튼 활성화 제거 */
    $(this).parent().addClass('on');		/* 클릭한 탭버튼 활성화 */
 
    var i = $(this).parent().index();			/* 클릭한 탭버튼 인덱스 담는 변수  */
    
    $('.frame > div').fadeOut(0);			/* 공지사항, 갤러리 모두 안 보이게 처리 */
    $('.frame > div').eq(i).fadeIn(0);		/* 클릭한 탭버튼과 같은 프레임만 보이게 */
});

 

팝업창

일반레이어 팝업창 — 

$('.popupOpen').click(function(){
    $('.popup').fadeIn(0); 
});
$('.popup a').click(function(){
    $('.popup').fadeOut(0);
});

모달레이어 팝업창 — 

$('.popupOpen').click(function(){
    $('.popupBg, .popup').fadeIn(0); 
});
$('.popup a').click(function(){
    $('.popupBg, .popup').fadeOut(0);
});

 

 

 

 

패밀리사이트

 

$('.family button').click(function(){
	$('.family ul').fadeToggle('fast'); 
});

 

 

관련포스트 설명

 

정리

웹디자인기능사 실기 | 주요 코드 정리 — 가장 먼저 알아야할 코드들 설명입니다.

웹디자인기능사 실기 | 기본적인 와이어프레임 구조 — 전체적인 구조에 대한 html, css, javascript 소스입니다.

웹디자인기능사 실기 | 메뉴, 슬라이드, 본문 유형 — 다음 어떤 유형들이 있는지 알아야겠죠?

웹디자인기능사 실기 | 메뉴(네비게이션) 유형별 소스 — 메뉴에 대해 css, javascript를 디테일하게 살펴볼까요?

웹디자인기능사 실기 | 슬라이드 패턴 — 슬라이드에 대해서도 css, javascript를 살펴보겠습니다.

웹디자인기능사 실기 | 유형별 jQuery 총정리 — 메뉴, 슬라이드, 본문, 팝업, 푸터에 대해 javacsript(jQuery) 정리

 

문제풀이

웹디자인기능사 실기 | 문제 풀이 A-1 (JUST쇼핑몰)

웹디자인기능사 실기 | 문제 풀이 A-2 (Green 복지재단)

웹디자인기능사 실기 | 문제 풀이 A-3 (강원천문대)

웹디자인기능사 실기 | 문제 풀이 A-4 (유진건설)

웹디자인기능사 실기 | 문제 풀이 B-1 (대한은행)

웹디자인기능사 실기 | 문제 풀이 B-2 (대한투어)

웹디자인기능사 실기 | 문제 풀이 B-3 (세계의 미술작품)

웹디자인기능사 실기 | 문제 풀이 C-1 (해운대 빛축제)

웹디자인기능사 실기 | 문제 풀이 C-3 (남도맛기행 축제)