웹디자인기능사 실기 함수
웹디자인기능사
웹디자인기능사 실기를 준비하는 과정에서 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");
});
Author And Source
이 문제에 관하여(웹디자인기능사 실기 함수), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@eunjeong/웹디자인기능사-실기-함수저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)