웹디자인기능사 실기 함수

웹디자인기능사

웹디자인기능사 실기를 준비하는 과정에서 jQuery가 필요한 부분들에 대해 정리합니다.
작성된 함수는 웹디자인기능사 실기 7일완성(김승일) 도서에서 도움받았습니다.

- Menu Navigation

메뉴 유형에 따라서 선택자는 .navi_box 혹은 .navi_box > ul > li가 된다.

$(".navi_box").mouseover(function(){
    $(this).children(".menu_box").stop().slideDown();
});

$(".navi_box").mouseleave(function(){
    $(this).children(".menu_box").stop().slideUp();
});

- Image Slide

좌우/상하 슬라이드

적용하는 css의 margin만 다르다.(margin-left:-1000px / margin-top:-400px)

start();
var imgs = 2;
var now = 0;

function start(){
    $(".imgs>img").eq(0).siblings().css({"margin-left:":"-1000px"});
    setInterval(function(){slide();},3000);
}
    
function slide(){
    now=now==imgs?0:now+=1;
    $(".imgs>img").eq(now-1).css({"margin-left":"-1000px"});
    $(".imgs>img").eq(now).css({"margin-left":"0px"});
}

Fade in / Fade out

start();
var imgs = 2;
var now = 0;

function start(){
    $(".imgs>img").eq(0).siblings().fadeOut('slow');
    setInterval(function(){slide();},3000);
}
    
function slide(){
    now=now==imgs?0:now+=1;
    $(".imgs>img").eq(now-1).fadeOut('slow');
    $(".imgs>img").eq(now).fadeIn('slow');
}

- Tab Menu

.tab_menu>li형식에 탭메뉴와 해당 메뉴의 내용을 작성한다. 형식은 다음과 같다.

<ul class="tab_menu">
	<li><a href="#">공지사항</a>
    	<div class="contents">공지사항 내용</div>
    </li>
    <li><a href="#">갤러리</a>
    	<div class="contents">갤러리 내용</div>
    </li>
</ul>

스크립트는 다음과 같다.

$(".tab_menu>li>a").click(function(){
    $(this).parent().addClass("on").siblings().removeClass("on");
    return false;
});

- Popup

레이어 팝업/모달 레이어 팝업으로 나뉘는데 모달 레이어 팝업에 어두운 배경만 추가될 뿐 스크립트는 동일하다.

$(".partner img").click(function(){
    $("#popup").addClass("active");
});
$("#popup button").click(function(){
    $("#popup").removeClass("active");    
});